1

ドラッグ可能+ドロップ可能なリストを作成しようとしていますが、これまでのところ、リストの単一のアイテムで機能させることができました。

しかし、リスト全体をドラッグアンドドロップできるようにしたいです。それは可能ですか？

私が持っているのは、アイテムを受け取るためのいくつかのリストとドロップ可能な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などのリスト全体をドラッグし、ドロップ可能なdivにすべてのアイテムをドロップすることです。出来ますか？

4

2 に答える 2

2

私は基本的にあなたが探しているものを持っています。あなたはそれをいじる必要があるかもしれません。私の変更はここにありますhttp://jsfiddle.net/XD3d9/12/

最初に h3 にクラスを与えました。名前はランダムでした。

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

次に、ドラッグ可能でシンプルにする必要がありました。

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

次に、どの要素がドラッグされているかを把握する必要がありました。h3 をドラッグすると、そのリストからすべてが取得され、新しいリストの 1 行に配置されます。あなたがそれをバラバラにしたいのなら、私はその部分を理解するためにあなたに残しました;)

$(".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);
    }
 }
});
于 2013-07-10T13:17:57.140 に答える