アイテムをドラッグ&ドロップできるようにする
並べ替えとか、ファイルとフォルダの移動とか、そういうものの実装に使えそうなやつ。
意外と簡単に実装できました。
jquery使ってます。
<HTML>
<span class="drag-item" data-iid="1">アイテム1</span> <span class="drag-item" data-iid="2">アイテム2</span> <div class="drop-area" data-aid="1">エリア1</div> <div class="drop-area" data-aid="2">エリア2</div>
<JS>
setDraggable(); setDroppable(); function setDraggable(){ $(".drag-item").draggable({ helper: "clone", }); } function setDroppable(){ $(".drop-area").droppable({ accept: ".drag-item", tolerance: "pointer", drop: function(event, ui) { // >>> ドロップしたときの処理 >>> var area_id = $(this).data("aid"); var item_id = $(ui.draggable).data("iid"); alert("アイテム" + item_id + "を、エリア" + area_id + "にドラッグ&ドロップしました。"); // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<< } }); }
わざわざ関数化しているのは、
「drag-item」「drop-item」をJSの他の処理で後から増やしたとき、
それらを改めてdraggable・droppableにしないと動かないからです。
増やす処理の後でこれらの関数を呼べばOK。