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});

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="..." />

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 comments until now

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



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

  2. 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. 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. 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. 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. I briefly discussed the relationship between (a) Javascript-animated Declarative markup and (b) Microformats, after prompting by the developer of GMapEZ, in this comment:


    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. 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. […] So what constitutes a “better job”? I suggest it has something to do with declarative Javascript, but my argument needs some work so I’ll save that – best practice #2, I guess – for another post. […]

  9. 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. “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. […] Just a quick followup on a previous piece, Ajaxian picked up a couple of declarative Javascript stories today; […]

  12. […] I’ve posted the position paper I authored for the W3C/OpenAjax Workshop on Mobile Ajax. It’s all about the value of declarative application development, which I’ve discussed before. […]

Add your comment now