jQuery UI droppable()

概要

選択された要素をドロップ可能にする。

構文

jQueryObject.droppable(options)
options
Droppableのオプションをオブジェクトで指定する。
Droppableのオプション
プロパティ 説明
accept ドロップを受け入れる要素
activate ドラッグ可能要素のドラッグが開始されたときに呼び出されるイベントハンドラ
activeClass ドラッグ可能要素のドラッグが開始されたときに適用するクラス
deactivate ドラッグ可能要素のドラッグが終了したときに呼び出されるイベントハンドラ
drop ドロップ時に呼び出されるイベントハンドラ
greedy ネストしたドラッグ可能要素にイベントを伝播しない
hoverClass ドラッグ可能要素が上に乗ったときに適用するクラス
out ドラッグ可能要素が上に乗った後外へ出たときに呼び出されるイベントハンドラ
over ドラッグ可能要素が上に乗ったときに呼び出されるイベントハンドラ
tolerance ドラッグ可能要素が上に乗ったと判定する方法

tolerance には以下に示すいずれかの値を指定する。

tolerance
説明
fit 完全に入る
intersect 半分以上入る
pointer ポインタが入る
touch 接触する

イベントハンドラ

イベントハンドラは以下に示すいずれかの形式で指定する。

function () {
  /* do something */
}
function (e, o) {
  /* do something */
}

以下に示す引数をイベントハンドラ関数に指定できる。

e
イベントオブジェクト
o
以下に示すプロパティを持つオブジェクト
プロパティ 説明
options Droppable要素に指定されたオプション
position helperオブジェクトの位置
absolutePosition helperオブジェクトの絶対位置
draggable Droppable要素
helper helperオブジェクト

サンプル

<div id="ex1" style="background-color:gray; height:50px; width:50px" data-color="gray"></div>
<div id="ex2" style="border:1px solid gray; height:120px; width:120px">
  ここにドロップしてください。
</div>
<script>
  $('#ex1').draggable({
    opacity: .5
  });
  $('#ex2').droppable({
    drop: function(e, o){
      $('#ex2').html(o.draggable.data("color"));
    },
    out: function(){
      $('#ex2').html("ここにドロップしてください。");
    }
  });
</script>
ここにドロップしてください。

参考文献

OpenJS Foundation (2022) jQuery UI

OpenJS Foundation (2022) jQuery