Несколько целей падения с плагином YUI dragdrop? - PullRequest
Новая
       17

Несколько целей падения с плагином YUI dragdrop?

1 голос
/ 28 января 2011

По сути, я хочу расширить этот пример / демо YUI, чтобы вместо одного целевого блока, который обновляется при перетаскивании элементов, у меня было несколько целевых блоков на выбор.Официальный пример Yahoo можно найти по адресу http://developer.yahoo.com/yui/3/examples/dd/delegate-drop.html

соответствующий код: 

<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>

Я пытался построить это в течение нескольких дней, но слишком много факторов я не понимаю,Одна вещь, которую я сделал, - это написать цикл, который будет циклически проходить по каждому целевому блоку и выполнять привязки для 'var drop = Y.one ...' и т. Д., Но результат был неважным, в какой блок я перетащил, только последнийможно было бы обновить (из-за чего-то связанного с замыканиями в Javascript, я думаю)

edit: забыл сказать, мне нужен YUI, чтобы применить функциональность перетаскивания ко всем целям, которые находятся внутри «целевого контейнера»похоже на то, как настроены элементы перетаскивания.Я не могу жестко связать каждый div, чтобы его можно было сбросить, потому что я не знаю, сколько будет заранее.

1 Ответ

0 голосов
/ 08 мая 2011

Одним из решений было бы обновить селектор отбрасывания до значения «все» и выполнить каждый из них на возвращаемом наборе nodeSet. (вместо того, чтобы указывать цель удаления одного узла с помощью #drop, вы можете назначить несколько объектов классом drop). 

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

также будет полезно использовать DDM (менеджер перетаскивания) для прослушивания событий вместо добавления прослушивателя для каждой цели перетаскивания. 

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

см. Пример Drag & Drop: переупорядочение списка с Bubbling , чтобы узнать больше о DDM, а также использовать nodeSet.each () для установки нескольких целей / экземпляров перетаскивания.

...