2006/07/21
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?
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…! ;-)
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.
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.
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…! ;-)
“
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.
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…
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…
[…] 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. […]
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.
“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.
[…] Just a quick followup on a previous piece, Ajaxian picked up a couple of declarative Javascript stories today; […]
[…] 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. […]