Multiple drop targets with YUI dragdrop plugin?

Basically I want to extend this YUI example/demo so that rather than having a single 'target' box which updates when elements are dragged into it, I have several target boxes to choose from. The official Yahoo example can be found at http://developer.yahoo.com/yui/3/examples/dd/delegate-drop.html

the relevant code:

<div id="play">

    <div id="demo">
        <ul>
            <li>Item #1</li>
            <li>Item #2</li>
            <li>Item #3</li>
            <li>Item #4</li>
            <li>Item #5</li>
            <li>Item #6</li>
            <li>Item #7</li>
            <li>Item #8</li>
            <li>Item #9</li>
            <li>Item #10</li>
        </ul>
    </div>

    <div id="drop">Drop on me</div>
</div>

<script>

YUI({ filter: 'raw' }).use('dd-delegate', 'dd-drop-plugin', function(Y) {
    var del = new Y.DD.Delegate({
        container: '#demo',
        nodes: 'li'
    });

    del.on('drag:end', function(e) {
        del.get('currentNode').setStyles({
            top: 0,
            left: 0
        });
    });

    var drop = Y.one('#drop').plug(Y.Plugin.Drop);
    drop.drop.on('drop:hit', function(e) {
        drop.set('innerHTML', 'You dropped: <strong>' + e.drag.get('node').get('innerHTML') + '</strong>');
    });


});
</script>

I've been trying to build this for days but there's too many factors I don't understand. One thing I did was write a loop that would cycle through each target-box and do the bindings for 'var drop = Y.one...' etc., but the result was no matter what box I dragged into, only the last one would update (because of something to do with closures in Javascript I think)

edit: forgot to say, i need YUI to apply the drop functionality to however many targets happen to be inside the 'target container', similar to how the drag elements are 开发者_开发问答set up. I can't hard-wire each div to be droppable because I don't how many there will be in advance.

one solution would be to update the drop selector to an "all" and do each on the nodeSet returned. (instead of having a single node drop target specified with '#drop', you can have multiple designated with a class of 'drop'.)

var dropNodes = Y.all('.drop').plug(Y.Plugin.Drop);
dropNodes.each(function(v, k) {
    var tar = new Y.DD.Drop({
        node: v
        });
    });    

it will also be helpful to use the DDM (drag drop manager) to listen for the events, instead of adding the listener to each drop target.

Y.DD.DDM.on('drag:drophit', function(e) {
   var drop = e.drop.get('node'),
       drag = e.drag.get('node');
   drop.set('innerHTML', 'You dropped: <strong>' + drag.get('innerHTML') + '</strong>');
});

see the Drag & Drop: List Reorder w/Bubbling example for more on the DDM, as well as using nodeSet.each() to set multiple targets / drag instances.