1

jsFiddle：http: //jsfiddle.net/XUygj/2/

单击任何这些元素时，我需要使用“活动”类一次拖动所有列表项，并允许将它们拖放到任何放置容器元素上：

多次拖放

如果我单击并按住上面屏幕截图中的任何绿色项目（2,4,5），我应该能够一次将所有这些项目拖到任何黄色容器中并触发一个 js 函数来处理所选项目适当地。

我怎样才能做到这一点？

我还需要保留一次拖放单个、未选中的列表项（没有active类）的能力。

我有一个一次一个的jsFiddle正在工作。我只是无法弄清楚多个拖放。

HTML：（http://jsfiddle.net/XUygj/2/）

<ul class="drop-containers">
    <li class="drop1">Drop 1</li>
    <li class="drop2">Drop 2</li>
    <li class="drop3">Drop 3</li>
</ul>

<ul class="items">
    <li class="item1" data-object="item1">Item 1</li>
    <li class="item2 active" data-object="item2">Item 2</li>
    <li class="item3" data-object="item3">Item 3</li>
    <li class="item4 active" data-object="item4">Item 4</li>
    <li class="item5 active" data-object="item5">Item 5</li>
    <li class="item6" data-object="item6">Item 6</li>
</ul>

JS：

$(document).ready(function() {
    $('.items > li').draggable({ revert: "invalid" });

    $('.drop-containers li').droppable({
        drop: function(event, ui) {
            var $this = $(this); // reuse JQuery object.
            var droppedObject = ui.draggable.data('object'); // get object type
            ui.draggable.remove();
            $this.append(', ' + droppedObject);
        }
    });
});

CSS

* {
    margin:0;
    padding:0;
}
.drop-containers {
    width:150px;
    display:inline-block;
}
.drop-containers li {
    width:100px;
    height:100px;
    border:1px solid;
    display:inline-block;
    margin:10px;
    background:#ffc;
}

.items {
    width:120px;
    display:inline-block;
    list-style-type:none;
}
.items li {
    width:100px;
    height:20px;
    border:1px solid;
    margin:10px;
    background:#fff;
}
.items li.active {
    background:#dfc;
}
4

1 回答 1

2

您需要使用helperjQuery 中的可拖动选项，当它们拖动时，您将克隆三个活动元素作为助手。例如：

$('.items > li').draggable({
    revert: 'invalid',
    helper: function(event) {
        var helperList = $('<ul class="draggable-helper" />');
        if ($(this).is('.active')){
            helperList.append($(this).siblings('.active').andSelf().clone());
        } else {
            helperList.append($(this).clone());
        }
        return helperList;
    }
});

该辅助函数会将它们附加到“.draggable-helper”列表中，以便您可以适当地对其进行样式设置，当然您需要根据自己的需要对其进行修改。

于 2013-04-30T20:16:24.467 回答