jQuery UI - Draggable + Droppable 整个列表

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，然后将其中的所有项目放到可放置的 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

你可以使用ul而不是指向li

$("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);
    }
});

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