JQuery UI によって提供される API により、ドラッグ アンド ドロップ機能の開発が大幅に簡素化されます。ドラッグ ソースとターゲットでそれぞれドラッグ可能関数とドロップ可能関数を呼び出すだけです。
ドラッグ アンド ドロップの原理
まず、いくつかの概念を明確にする必要があります。
ソース: ドラッグ元、ドラッグされる要素。
ターゲット: ソースに配置できるコンテナであるターゲットをドラッグ アンド ドロップします。
ドラッグ アクションは次のように分類されます。
1. ドラッグ開始: ドラッグ ソース (ソース) 上でマウスを押して移動を開始します
2. ドラッグ移動: 移動中
3. ドラッグenter : ターゲットコンテナに移動
4. ドラッグ left: ターゲットコンテナから移動
5. Drop: ターゲットコンテナ上でマウスを放します
6. ドラッグ end: 終了
HTML5 より前は、ページ要素はドラッグ イベントを直接サポートしていませんでした。したがって、ドラッグ アンド ドロップ機能は、マウス イベントをリッスンし、ドラッグ アンド ドロップのステータスを記録することによって実装されます。
最も単純な例
最も単純なドラッグでは、要素が配置されているコンテナは変更されず、その位置のみが変更されます。例は次のとおりです。
がトリガーされます。 オーバー: ソースはターゲットにドラッグされます。 🎜>. Out: ソースがターゲットからドラッグされます。
イベント処理関数は、ドラッグ可能関数とドロップ可能関数のパラメーターを介して渡され、これらのイベント処理でフィードバックを実行できます。機能。実際の例を見てみましょう:
ドロップ可能!
$(function() {
$( "#dragsource" ).draggable({
start: function(event,ui) {
$(this).find("p"). html(":-S");
},
stop:function(event,ui){
$(this).find("p").html(":-|");
}
});
$( "#droppable" ).droppable({
activate: function(event,ui) {
$(this).find(" p").html( "ここにドロップ !" );
},
over: function(event,ui) {
$( this ).find( "p" ).html( "ああ、そうだね!" );
},
out: function(event,ui) {
$( this ).find( "p" ).html( "私を置いていかないで!" );
},
drop: function(event, ui ) {
$( this ).find( "p" ).html( "わかりました!" ); 🎜>}
});
})
