tomhodgins/dragon

dragon.js is a bookmarklet that lets you drag any element on a website using a mouse or touchscreen. The goal is to speed up in-browser design critiques and brainstorming new layout ideas.

Dragon.js 🐉

dragon.js is a bookmarklet that lets you drag any element on a website using a mouse or touchscreen. The goal is to speed up in-browser design critiques and brainstorming new layout ideas.

How to use

You can test the functionality with demo content on index.html, where you will also find the ‘pretty’ source code for the bookmarklet.

Demo at http://staticresource.com/dragon

To use this on other websites you have two options: run it as JavaScript on the page, or create a bookmarklet.

How to create a bookmarklet

• Create a bookmark
• Edit the URL
• replace the URL with javascript: followed by the contents of dragon.js

Now you can load load any page, then tap the bookmarklet to enter 'dragon' mode

How to run as JavaScript

You have two options here as well. All browsers except mobile safari (iPad and iPhone) will allow you to simply replace the URL in the address bar of a loaded website with javascript: and then write whatever JavaScript you want. I find this easier than a bookmarklet on desktop.

The other way is by opening your Developer Tools in the browser you can paste the contents of dragon.js into the JavaScript Console and enter it and it will run on the page as well.

🐲 —happy hacking!

dragon's Issues

Add a link to be dragged to the bookmark bar

Setting up the bookmarklet is not that easy and might stop some people from using it. It'd be great to add a link to be dragged to the top bar. Right now, the dragon.js file is not hosted on a https site so it wouldn't work on sites that use an ssl certificate.

To solve that, the demo could be moved to a github page which uses https. Then you'd just have to include a link with:

javascript:(function()%7Bvar script%3Ddocument.createElement(%27script%27)%3Bscript.setAttribute(%27src%27, %27https://path/to/dragon.js%27)%3Bdocument.body.appendChild(script)%3B%7D())%3B

Clicking to drag items triggers the behavior of the clicked elements

When press mouse down to drag an element, the behavior of the clicked element is triggered. Which might end up in submitting a form, opening a dropdown, ... I think it'd be cool to prevent that.

P.S: Great job with dragon.js, that's definitely something that designers are going to love. I'm giving it a try and wanted to raise some of the issues I faced - I might contribute too ^^

Resize feature request

Hi Tom!
Would resizing of the elements be possible in a future feature?
Thanks.

Make the bookmarklet toggle-able

Make the bookmarklet toggle-able, this could be done using an if/else condition like this bookmarklet does that allows you to edit the text on anywebpage when you click it then it stops when you click it again:

javascript:if(document.body.contentEditable !== 'true') { document.body.contentEditable = 'true'; document.designMode='on'; void 0} else { document.body.contentEditable = 'false'; document.designMode='off'; void 0}

This would be a very useful addition!

Generate responsive CSS

Thank you for making this very useful script, it would be great if we can responsive generate inline css.