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