6

だから私が探しているのは、同じ要素でソート可能とドロップ可能の両方を使用する方法です。5 つの要素のリストがあるとします。これらはすべて並べ替え可能です。私がやろうとしているのは、ある要素が別の要素の上にドロップされると、その要素に追加されてリストから外れることです。例:

<ul>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

エレメントがドロップされました

<ul>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item 
        <ul>
              <li>List Item Dropped</li>
        </ul>
    </li>

</ul>

これを行う方法についての手がかりがあれば、回答やガイドラインをいただければ幸いです。

4

2 に答える 2

0

HTML:

<ul id="theUL">
    <li class="item">List Item</li>
    <li class="item">List Item</li>
    <li class="item">List Item</li>
    <li class="item">List Item</li>
    <li class="item">List Item</li>
</ul>

sortableULのコードは次のとおりです。changeイベントを構成する必要があります。sort イベントが発生すると Change イベントが発生し、それ以外の場合は drop イベントが発生します。

$("#theUL").sortable({
    revert: true,
    items: "li",
    change: function( event, ui ) {ui.helper.addClass("change");},
    beforeStop: function( event, ui ) {ui.helper.removeClass("change");}
});

ドロップ可能なコードでは、変更が発生したかどうかを確認し、そうでない場合はドロップされたことを意味します。

$(".item" ).droppable({
    accept: function(el) {
        return el.hasClass('item');
    },
    drop: function (event, ui) {
        item=ui.draggable;
        if(!item.hasClass('change')){
            //dropped!
        }
    }

});
于 2013-05-31T16:52:28.320 に答える