Declarative Drag-and-drop

I was looking through the scriptaculous drag-and-drop pages tonight, and stumbled upon this markup/script snippet;

<div id="photo1"> <img ... /> </div>
<script type="text/javascript" language="javascript">
 new Draggable('photo1',{revert:true});
</script>

Isn’t that just screaming out for declarative Javascript?

So I quickly hacked together a teeny tiny script to present the Javascript API via a declarative interface. See it in action for yourself (Firefox only). The markup for that script above would be, simply;

<draggable id="photo1" revert="true">
<img src="..." />
</draggable>

I’ve just got drag working right now. Drop will be a little trickier, because I’ve got to decide whether I want to setup something like an “onDrop” handler (pro: powerful, con: powerful), or whether I can define some canned droppable types, like a shopping cart, or a file uploader, etc.. Perhaps both?

12 thoughts on “Declarative Drag-and-drop

  1. Duncan Cragg

    Wow, I write an essay about it, and you say roughly the same thing in five paragraphs and a demo…

    Excellent!

    Duncan

    PS Thanks for the mention! :-)
    PPS XHTML (and microformats.org) would want or something like that – and you missed a ‘/’ on anyway…! ;-)

  2. Leigh Dodds

    Why not use a CSS style rather than a draggable element? Regains validity with no loss of declarative power?

    As you’re using prototype (under scriptaculous) you can use $$ (IIRC) to get all the draggables.

  3. distobj

    Leigh – I like the role of CSS in declarative markup, but I don’t think it’s appropriate in this case as what I’m going for is more functional than presentational. There’s no hard line though, I admit.

    I’ve never used scriptaculous except for this; it was just one of the first search responses for “javascript drag and drop”, so I used it. prototype sounds neat though.

  4. Duncan Cragg

    OK – my angle brackets got sucked out by WordPress – so using ‘{‘ and ‘}’ instead, what I actually said was:


    PPS XHTML (and microformats.org) would want {div style=”draggable”} or something like that – and you missed a ‘/’ on {/draggable} anyway…! ;-)

  5. Mark Baker

    Ah, good catch Duncan. Good thing that’s an HTML page 8-)

    As for making it microformat-friendly, well, I think the extension element makes more sense in this case (and I don’t understand why microformats don’t use them). It’s all in the same spirit of reuse & extension of HTML though.

  6. Duncan Cragg

    I briefly discussed the relationship between (a) Javascript-animated Declarative markup and (b) Microformats, after prompting by the developer of GMapEZ, in this comment:

    http://duncan-cragg.org/blog/post/microformats-challenge-web-feeds-and-web-apis/#comment-167

    Of course draggability is hardly a candidate for a Microformat, but cut-n-pastability may be (q.v. LiveClipboard), although implicitly up to now – but why not allow snippets of your page to be marked as extractable in one piece with a right-click?

    BTW – I obviously meant class=””, not style=”” above.

    Is there an option on WordPress to allow angle brackets in?? Would’ve saved me all this messing…

  7. Mark Baker

    GMapEZ- thank you! I spotted that earlier this year but forgot the name. It was very well done.

    Sorry, can’t find a way to change comment syntax. Perhaps there’s a plugin…

  8. Pingback: Web Things, by Mark Baker » Blog Archive » Towards best practices for mashups

  9. Bill de hOra

    I don’t get why inventing a draggable element beats using a div, but fwiw you can hang all these behaviour off the img tag directly.

  10. Mark Baker

    “draggable” doesn’t beat “div”, it beats “new Draggable()”.

    And sure, I could have extended img, but you might want to drag more than images, so as “Draggable” (or class=”draggable”, I suppose – more microformatty 8-), it seems more reusable.

  11. Pingback: Web Things, by Mark Baker » Blog Archive » Declarative Ajax catching on

  12. Pingback: Web Things, by Mark Baker » Blog Archive » Mobile Ajax Workshop position paper

Leave a Reply

Your email address will not be published. Required fields are marked *