dojo drag and drop: how to add handler for drop event
I have a simple list like this:
<div dojoType="dojo.dnd.Source" id="myList">
<div class="dojoDndItem">item 1</div>
<div c开发者_开发问答lass="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?
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/
精彩评论