dojo drag and drop: how to add handler for drop event

Question

I have a simple list like this:

<div dojoType="dojo.dnd.Source" id="myList">
    <div class="dojoDndItem">item 1</div>
    <div class="dojoDndItem">item 2</div>
    <div class="dojoDndItem">item 3</div>
</div>

And I use the dojo attributes to make the list sortable.

It works without any problems, but how do I add a listener to the event when an item is dropped? If the user releases the mouse and the element snaps in place I want a javascript function to handle this event. How can I add it via markup?

Answer 1

The extension point you're probably interested in is the onDrop method on the Source. You can use the <script type="dojo/..."> syntax understood by the parser to accomplish this declaratively, e.g.:

<div dojoType="dojo.dnd.Source" id="myList">
    <script type="dojo/connect" event="onDrop" args="source, nodes, copy">
        console.log('received drop event:', source, nodes, copy);
    </script>
    <div class="dojoDndItem">item 1</div>
    <div class="dojoDndItem">item 2</div>
    <div class="dojoDndItem">item 3</div>
</div>

Note that I connect to the method because there is important functionality within dojo.dnd.Source's onDrop method, and the methods it invokes in its default implementation; if I were to override the function instead by using <script type="dojo/method">, that default functionality would be clobbered.

The following SitePen Blog post gives more information on this feature available in the parser: http://www.sitepen.com/blog/2007/09/21/dojo-09-power-tools-script-typedojomethod/