Drag and drop element bookmarklet

A bookmarklet using jQuery and jQuery UI to convert any element to a draggable and droppable element.

Lately, for several projects I’ve been to needing to position many elements absolutely, by hand. I knew drag and drop functionality was easy, but didn’t even try. Today, again I had to position:absolute a bunch of element by hand… Enough!. Enter a bookmarklet to move things around.

This bookmarklet loads from the jQuery CDN: jQuery UI and jQuery (if not already on the page). jQuery UI is to use the Draggable Widget.

Drag and Drop Bookmarklet screenshot

The rest is just UI to write the selector for the elements you want to drag and drop.

Dragg the Draggable bookmarklet to your favourites bar.

I’m opening a repo on github for this bookmarklet. Now that I’ve tested a few cases, I have plenty ideas for it, for starters, host the whole code in the repo, so it get updated automatically. For now it’ll be just one file.

The repo on gitbu is: github.com/baamenabar/draggable-bookmarklet

This also may help with moving things around for clients at meetings.

If it’s been done before, I’ve never seen it, I googled, and nothing, so I built it, mostly based on what was published by smashing magazine in coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/

UPDATE: I have moved the code to the repo, debugging the bookmarklet was becoming painful.

Published :

Start date :

Last modified :


comments powered by Disqus