端くれプログラマの備忘録 jQuery UI [jQuery UI] 基本メモ: Droppable

[jQuery UI] 基本メモ: Droppable

サンプルコード

<div class="box" style="width:50px; height:50px; background:#ccc;">box</div>
<div class="target" style="width:100px; height:100px; background:pink;">target</div>
$('.box').draggable();
$('.target').droppable({
    accept: '.box',
    hoverClass: 'ui-state-active', //ドロップ可能時のスタイル
    tolerance: 'fit', //全体が収まらなければドロップ可能にならない
    drop: function(event, ui) { //ドロップされた
        console.log('dropped');
    },
    over: function(event, ui) { //ドロップ可能状態になった
        console.log('over');
    },
    out: function(event, ui) { //ドロップ不可能状態になった
        console.log('out');
    }
});

以下の例は、元オブジェクトは残したまま複製をドラッグする。

$('.box').draggable({
    helper: 'clone',
});
$('.target').droppable({
    accept: '.box',
    drop: function(event, ui) {
        ui.draggable.clone().appendTo(this); //ドロップされたオブジェクトを複製して自分に追加
    },
});

参考サイト

Droppable | jQuery UI
https://jqueryui.com/droppable/