サンプルコード
|
1 2 |
<div class="box" style="width:50px; height:50px; background:#ccc;">box</div> <div class="target" style="width:100px; height:100px; background:pink;">target</div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$('.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'); } }); |
以下の例は、元オブジェクトは残したまま複製をドラッグする。
|
1 2 3 4 5 6 7 8 9 |
$('.box').draggable({ helper: 'clone', }); $('.target').droppable({ accept: '.box', drop: function(event, ui) { ui.draggable.clone().appendTo(this); //ドロップされたオブジェクトを複製して自分に追加 }, }); |
参考サイト
Droppable | jQuery UI
https://jqueryui.com/droppable/