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