Coder Social home page Coder Social logo

tomhodgins / dragon Goto Github PK

View Code? Open in Web Editor NEW
146.0 8.0 18.0 31 KB

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.

Home Page: http://tomhodgins.github.io/dragon/

License: MIT License

HTML 18.60% CSS 72.99% JavaScript 8.41%
in-browser dev-tool touchscreen web-design web-development bookmarklet

dragon's People

Contributors

tomhodgins avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

dragon's Issues

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 ^^

Generate responsive CSS

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

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

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!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.