jQueryの並べ替え可能なプラグインを使用しています
2つのブロックが接続されており、1つはドラッグ可能で、もう1つは並べ替えのみが可能です。
私がやりたいのは、アイテムをソート可能から特定のdivにドラッグして削除するときです。
マークアップは次のとおりです。
<div>Draggable source items
<ul>
<li class="draggable" class="ui-state-highlight">Drag me down</li>
<li class="draggable" class="ui-state-highlight">Drag me down 2</li>
<li class="draggable" class="ui-state-highlight">Drag me down 2</li>
</ul>
</div>
<div>Sortable List 1
<ul class="sortableList">
</ul>
</div>
<div class="test">
<!--IF YOU DRAG THE ITEM fROM THE SORTABLE LIST HERE IT WILL REMOVE IT -->
</div>
JS：
(document).ready(function () {
$(".sortableList").sortable({
revert: true,
/*update: function (event, ui) {
// Some code to prevent duplicates
}*/
});
$(".draggable").draggable({
connectToSortable: '.sortableList',
cursor: 'pointer',
helper: 'clone',
revert: 'invalid'
});
});
これがjsfiddleです
これはどう？
$('.droppableArea').droppable({
accept: 'li',
drop: function(event, ui) {
ui.helper.remove();
}
});
ドロップ可能なDIVに「droppableArea」クラスのマークを付けました。詳細については、フィドルを参照してください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加