アナログCPU:5108843109

ゲームと音楽とプログラミング(酒と女とロックンロールのノリで)

('ω') < イザユケエンジニャー

アイテムをドラッグ&ドロップできるようにする

並べ替えとか、ファイルとフォルダの移動とか、そういうものの実装に使えそうなやつ。
意外と簡単に実装できました。

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。