Question

我正在尝试创建一个Draggable + Droppable列表，到目前为止，我已设法使其与列表中的单个项目一起使用。

但我希望能够拖放整个列表。这可能吗？

我所拥有的是一个嵌套的手风琴，有几个列表和一个可放置的div来接收这些项目：

<div>
<div id="faqs-container" style="float: left; width: 250px"  class="accordian">
<h3><a href="#">One</a></h3>
<div class="accordian">
    <h3><a class=href="#">A</a></h3>
        <div>
            <ul>
                <li>list1</li>
                <li>list2</li>
                <li>list3</li>
            </ul>
        </div>
        <h3><a href="#">B</a></h3>
        <div>    
            <ul>
                <li>list4</li>
                <li>list5</li>
                <li>list6</li>
            </ul>
       </div>
</div>
<div style="float: right; width: 200px">
                <div class="grupoFinal">
                    <div class="ui-widget-content">
                        <ol>
                            <li class="placeholder">Drop here!</li>
                        </ol>
                    </div>
                </div>
            </div>
</div>

使用jquery我可以使它工作：

$("div.accordian").accordion({
    autoHeight: false,
    collapsible: true,
    active: false,


});
$("div.accordian li").draggable({
    //appendTo: "body",
    helper: "clone"
});
$(".grupoFinal ol").droppable({
    drop: function (event, ui) {
    $(this).find(".placeholder").remove();
    $("<li></li>").text(ui.draggable.text()).appendTo(this);
    }
});

我有a working demo。

所以，我想要做的是拖动整个列表，例如列表A，并将所有项目放在droppable div上。有可能吗？

Answer 1

我基本上有你想要的东西，你可能需要摆弄它。我的更改位于http://jsfiddle.net/XD3d9/12/

首先我给了h3一个类，名字只是随机的。

<h3 class="boots"><a  href="#">A</a></h3>

然后我需要让它变得简单。

$('.boots').draggable({
   helper: 'clone'
});

然后我需要弄清楚哪个元素被拖动了。当您拖动h3时，它会从该列表中获取所有内容并将其放在一行中的新列表中。如果你想把它分开，我把那部分留给你去弄清楚，你应该能够;）。

$(".grupoFinal ol").droppable({
 drop: function (event, ui) {
  $(this).find(".placeholder").remove();
    if (ui.draggable.prop('tagName') === 'LI') {
        $("<li></li>").text(ui.draggable.text()).appendTo(this);
    }
    if (ui.draggable.prop('tagName') === 'H3') {
        $("<li></li>").text(ui.draggable.next('div').text()).appendTo(this);
    }
 }
});

Answer 2

您可以使用li

，而不是指向ul

$("div.accordian ul").draggable({
    //appendTo: "body",
    helper: "clone"
});
$(".grupoFinal ol").droppable({
    drop: function (event, ui) {
    $(this).find(".placeholder").remove();
    $("<ul></ul>").text(ui.draggable.text()).appendTo(this);
    //---  get the next element
    $("<li></li>").text(ui.draggable.next('div').text()).appendTo(this);
    }
});

这使整个列表成为可拖动的。

jQuery UI - Draggable + Droppable整个列表

2 个答案: