4 ms·

On a slightly different note - have you ever wanted to click/tap to rearrange elements on -any- website? Just yesterday I wrote a little bit of JavaScript that

by err4nt 11y ago

On a slightly different note - have you ever wanted to click/tap to rearrange elements on -any- website? Just yesterday I wrote a little bit of JavaScript that will let you reposition any element by dragging it: http://codepen.io/tomhodgins/pen/LGJKdE http://codepen.io/tomhodgins/pen/LGJKdE And of course, I also minified it so it can be used from the address bar or as a bookmarklet. The minified version is at http://staticresource.com/dragon.js http://staticresource.com/dragon.js Ive been having fun loading up sites I know, invoking the JS and then trying to rearrage the elements into better designs! For example, how would HN look if the reply buttons were aligned to the right edge of the textarea they are under, that would be an improvement :) We can try it out!

alessioalex 11y ago
This looks like a fun experiment. Have you considered adding this as a Chrome plugin and make it "remember" what you drag? Also maybe implement some sort of "undo" mechanism as well? Thanks for sharing.
- err4nt 11y ago
  Hi! Thanks for your interest. > Have I considered making it a chrome plugin? No, but you can run it by pasting 'javascript:' in the URL bar, followed by the contents of http://staticresource.com/dragon.js http://staticresource.com/dragon.js or as a bookmarklet in Chrome, but the real intended browser I was hoping to use this on was Mobile Safari - to rearrange sites via touch on limited hardware. It also works flawlessly on a $50 Amazon Fire tablet too! What I created it for was the ability to load up a site, rearrange it, screenshot it - and refresh to have it return to normal (either for more screenshots or to use it). One reason this won't do what you're thinking it will 'saving the location to where you have dragged it' is that it does unexpected things when you resize the browser. If your browser always remembered where you positioned things I think it would quickly end up broken :/ > Can you implement an undo? I was thinking about this last night. It is possible (you could remember the previous values for the top and left, then set those values when a keyboard key is pressed) but again the big target for this script for my use will be browsers without keyboard (for an undo shortcut) so I'd also need to add an on-screen undo button. I'm still thinking about this and how to accomplish it. Feel free to use the source as well, consider it under MIT license :)
DonHopkins 11y ago
Please add a trash can in the corner so you can throw out any element you don't like! Once I ran an X window manager on XCalc's client window. Each button got its own window frame, and you could move them around and iconify the ones you didn't need. Unfortunately the icons were bigger than the buttons.
- err4nt 11y ago
  Did you know in the developer tools (if you right click on an element and hit 'Inspect') if you have an element selected in the live DOM tree view you can hit delete or backspace (can't remember) and actually just delete that node from the rendered page! If you want to cosmetically hide it without deleting it, you can click in the sidebar where there are all of the CSS styles there that apply to the element you have selected you can add (double click at the top of the sidebar and start a new rule) display: none And the element will visually be hidden, while that content is still on the page in a hidden way. What you would find, if I tried to add an 'X' button to every element on the page, is that often things are in multiple containers - and the most broken sites are usually the ones with the biggest HTML. It would be nearly impossible for you to 'X' out of elements visually top-down, the only way I can see you being able to get in and actually select which element to delete is using the tree-view in inspect element where you can navigate through the elements in the stack as though you're looking from the side and can touch just the layer you want.
- theoh 11y ago
  Excellent story, but I assume few applications these days use Xt or Xaw widgets anymore. It's striking how the pendulum has swung away from programmer-orientated environments like X11 or Emacs where writing your own policy/component/tool/script is encouraged and attributes of internal widgets etc. are accessible. May it swing back soon.
oliv__ 11y ago
This is really cool. I could totally see a visual web editor that could work by dragging things around like this, with the css properties in a sidebar updating as you drag things around. And it could also work for "power users" by letting you edit the css directly, like you would in the browser Inspector. I myself like to design in the browser to quickly see changes but sometimes Inspect element > Manually track and copy all changes to actual editor gets a little annoying. Would love to use what I just described.
- err4nt 11y ago
  My job is to design sites that work responsively, from widths randing from 200px - 2000px. There's no way one layout that could be achieved through drag-and-drop like this could adapt to fit desktop, tablet, and phone users, unless you have multiple, entirely different layouts built for different widths using the same elements, so then it 'jumps' between totally different layouts between phone, tablet, and desktop. That's not ideal since desktop users may resize their browser into 'tablet' mode and totally lose the experience. Jumping between alternate layouts is jarring. The nature of responsive CSS is that the simplest way to build a responsive website isn't to use a tool - but just to write the CSS by hand. I don't even use SASS or Less to compile CSS for me. At the end of the day, if the result you want is lines of CSS in a file, the simplest way to arrive at that result is to write only the lines of CSS you need. If you're wanting to design responsive websites I'd say the easiest tool to use would be a text editor!
  - oliv__ 11y ago
    No no, of course. I agree that typing css is still the best way. I just meant that moving things around and seeing the CSS change accordingly would be an educating "bonus" tool for beginners within what would be a fully fledged "live view" editor for people like you or me.
    - err4nt 11y ago
      I only use Firefox for testing, not as my primary development browser - but they do have a number of visual editing tools built into Firefox Developer Edition that may fit the bill for desktop users! https://www.mozilla.org/en-US/firefox/developer https://www.mozilla.org/en-US/firefox/developer
nkrisc 11y ago
This has a lot of potential to be very useful. One suggestion I'd make (or just implement myself) is suppress mouse events. When I'm dragging a link, for example, and I release the mouse it counts as a click on the link and I lose everything I moved. The biggest use case I see for this is making super fast screenshots of variations of pages to illustrate an idea for an improvement to developers, other designers, or stakeholders.
- err4nt 11y ago
  There is already `e.preventDefault()` happening on the events, so for example when you drag on a touchscreen it would normally scroll the page - but after invoking this it won't do that. What I'm not sure how to do is block other things on the page specifically also set to happen on the same events. On a desktop web browser playing around with this I've had success hammering on the Esc key while moving links though. If you press Esc right after releasing most links it won't leave the page :)
  - nkrisc 11y ago
    I managed to alleviate most of the problem by adding a new click event listener that `e.preventDefault()` to every target of the drag event. It's kinda clunky but it works for anchor tags. Doesn't work if the element uses JS for navigation/showing a modal/etc. I figure effectively disabling everything you drag doesn't really matter as dragging stuff around kinda FUBARs the page anyway.

by err4nt 11y ago

alessioalex 11y ago

This looks like a fun experiment. Have you considered adding this as a Chrome plugin and make it "remember" what you drag? Also maybe implement some sort of "undo" mechanism as well? Thanks for sharing.

err4nt 11y ago
Hi! Thanks for your interest. > Have I considered making it a chrome plugin? No, but you can run it by pasting 'javascript:' in the URL bar, followed by the contents of http://staticresource.com/dragon.js http://staticresource.com/dragon.js or as a bookmarklet in Chrome, but the real intended browser I was hoping to use this on was Mobile Safari - to rearrange sites via touch on limited hardware. It also works flawlessly on a $50 Amazon Fire tablet too! What I created it for was the ability to load up a site, rearrange it, screenshot it - and refresh to have it return to normal (either for more screenshots or to use it). One reason this won't do what you're thinking it will 'saving the location to where you have dragged it' is that it does unexpected things when you resize the browser. If your browser always remembered where you positioned things I think it would quickly end up broken :/ > Can you implement an undo? I was thinking about this last night. It is possible (you could remember the previous values for the top and left, then set those values when a keyboard key is pressed) but again the big target for this script for my use will be browsers without keyboard (for an undo shortcut) so I'd also need to add an on-screen undo button. I'm still thinking about this and how to accomplish it. Feel free to use the source as well, consider it under MIT license :)

DonHopkins 11y ago

Please add a trash can in the corner so you can throw out any element you don't like! Once I ran an X window manager on XCalc's client window. Each button got its own window frame, and you could move them around and iconify the ones you didn't need. Unfortunately the icons were bigger than the buttons.

err4nt 11y ago
Did you know in the developer tools (if you right click on an element and hit 'Inspect') if you have an element selected in the live DOM tree view you can hit delete or backspace (can't remember) and actually just delete that node from the rendered page! If you want to cosmetically hide it without deleting it, you can click in the sidebar where there are all of the CSS styles there that apply to the element you have selected you can add (double click at the top of the sidebar and start a new rule) display: none And the element will visually be hidden, while that content is still on the page in a hidden way. What you would find, if I tried to add an 'X' button to every element on the page, is that often things are in multiple containers - and the most broken sites are usually the ones with the biggest HTML. It would be nearly impossible for you to 'X' out of elements visually top-down, the only way I can see you being able to get in and actually select which element to delete is using the tree-view in inspect element where you can navigate through the elements in the stack as though you're looking from the side and can touch just the layer you want.
theoh 11y ago
Excellent story, but I assume few applications these days use Xt or Xaw widgets anymore. It's striking how the pendulum has swung away from programmer-orientated environments like X11 or Emacs where writing your own policy/component/tool/script is encouraged and attributes of internal widgets etc. are accessible. May it swing back soon.

oliv__ 11y ago

This is really cool. I could totally see a visual web editor that could work by dragging things around like this, with the css properties in a sidebar updating as you drag things around. And it could also work for "power users" by letting you edit the css directly, like you would in the browser Inspector. I myself like to design in the browser to quickly see changes but sometimes Inspect element > Manually track and copy all changes to actual editor gets a little annoying. Would love to use what I just described.

err4nt 11y ago
My job is to design sites that work responsively, from widths randing from 200px - 2000px. There's no way one layout that could be achieved through drag-and-drop like this could adapt to fit desktop, tablet, and phone users, unless you have multiple, entirely different layouts built for different widths using the same elements, so then it 'jumps' between totally different layouts between phone, tablet, and desktop. That's not ideal since desktop users may resize their browser into 'tablet' mode and totally lose the experience. Jumping between alternate layouts is jarring. The nature of responsive CSS is that the simplest way to build a responsive website isn't to use a tool - but just to write the CSS by hand. I don't even use SASS or Less to compile CSS for me. At the end of the day, if the result you want is lines of CSS in a file, the simplest way to arrive at that result is to write only the lines of CSS you need. If you're wanting to design responsive websites I'd say the easiest tool to use would be a text editor!
- oliv__ 11y ago
  No no, of course. I agree that typing css is still the best way. I just meant that moving things around and seeing the CSS change accordingly would be an educating "bonus" tool for beginners within what would be a fully fledged "live view" editor for people like you or me.
  - err4nt 11y ago
    I only use Firefox for testing, not as my primary development browser - but they do have a number of visual editing tools built into Firefox Developer Edition that may fit the bill for desktop users! https://www.mozilla.org/en-US/firefox/developer https://www.mozilla.org/en-US/firefox/developer

nkrisc 11y ago

This has a lot of potential to be very useful. One suggestion I'd make (or just implement myself) is suppress mouse events. When I'm dragging a link, for example, and I release the mouse it counts as a click on the link and I lose everything I moved. The biggest use case I see for this is making super fast screenshots of variations of pages to illustrate an idea for an improvement to developers, other designers, or stakeholders.

err4nt 11y ago
There is already `e.preventDefault()` happening on the events, so for example when you drag on a touchscreen it would normally scroll the page - but after invoking this it won't do that. What I'm not sure how to do is block other things on the page specifically also set to happen on the same events. On a desktop web browser playing around with this I've had success hammering on the Esc key while moving links though. If you press Esc right after releasing most links it won't leave the page :)
- nkrisc 11y ago
  I managed to alleviate most of the problem by adding a new click event listener that `e.preventDefault()` to every target of the drag event. It's kinda clunky but it works for anchor tags. Doesn't work if the element uses JS for navigation/showing a modal/etc. I figure effectively disabling everything you drag doesn't really matter as dragging stuff around kinda FUBARs the page anyway.