JQuery UIのドラッグ＆ドロップ function_jquery の実装方法まとめ

JQuery UI によって提供される API により、ドラッグ アンド ドロップ機能の開発が大幅に簡素化されます。ドラッグ ソースとターゲットでそれぞれドラッグ可能関数とドロップ可能関数を呼び出すだけです。

ドラッグ アンド ドロップの原理
まず、いくつかの概念を明確にする必要があります。
ソース: ドラッグ元、ドラッグされる要素。
ターゲット: ソースに配置できるコンテナであるターゲットをドラッグ アンド ドロップします。
ドラッグ アクションは次のように分類されます。
1. ドラッグ開始: ドラッグ ソース (ソース) 上でマウスを押して移動を開始します
2. ドラッグ移動: 移動中
3. ドラッグenter : ターゲットコンテナに移動
4. ドラッグ left: ターゲットコンテナから移動
5. Drop: ターゲットコンテナ上でマウスを放します
6. ドラッグ end: 終了
HTML5 より前は、ページ要素はドラッグ イベントを直接サポートしていませんでした。したがって、ドラッグ アンド ドロップ機能は、マウス イベントをリッスンし、ドラッグ アンド ドロップのステータスを記録することによって実装されます。

最も単純な例
最も単純なドラッグでは、要素が配置されているコンテナは変更されず、その位置のみが変更されます。例は次のとおりです。

コードをコピー コードは次のとおりです:

;p>ドラッグしてください!

<script> <BR>$(function() { <BR>$( "#dragsource" ).draggable(); <BR>}) <BR>&lt ;/script> <BR> <BR><BR> <BR><BR>別のコンテナにドラッグする<BR> <BR>要素をコンテナ内の別のコンテナに移動します。これには、ドロップ ターゲット コンテナにドロップ可能関数を適用する必要があります。前の例に基づいて div をコンテナとして追加し、ドロップ可能関数を適用しましょう: </script>

コードをコピー

コードは次のとおりです。

ドラッグしてください!

ここにドロップ

;/div>


<script> <BR>$(function() { <br>$( "#dragsource" ).draggable(); <br>$( "#droppable" ).droppable(); <BR></script>




イベントの監視とフィードバック (フィードバック)

前の例を実行すると、本当にターゲット コンテナーに配置されているのか混乱するかもしれません。 ?ユーザーも同様の疑問を抱くでしょう。したがって、ドラッグプロセス中に発生するいくつかのイベントを監視し、目に見える方法でユーザーに知らせることができます。これをフィードバックといいます。

ソースの場合、監視できるイベントは次のとおりです。

create: ソースにドラッグ可能な機能が適用されたときにトリガーされます
start: ドラッグが開始されたときにトリガーされます
drap: ドラッグ中にトリガーされます

停止: リリースされたときにトリガーされます
ターゲット (ターゲット) について、監視できるイベントは次のとおりです: 作成: ドロップ可能関数がターゲットに適用されたときにトリガーされます アクティブ化: 現在のドラッグ ソースをこのターゲットにドロップできる場合、
がトリガーされます。 非アクティブ化: このターゲットへのドロップが停止すると、
がトリガーされます。 オーバー: ソースはターゲットにドラッグされます。 🎜>. Out: ソースがターゲットからドラッグされます。
Drop: ソースがターゲットに解放されます。
イベント処理関数は、ドラッグ可能関数とドロップ可能関数のパラメーターを介して渡され、これらのイベント処理でフィードバックを実行できます。機能。実際の例を見てみましょう:




コードをコピーします


コードは次のとおりです:

:-|

ドロップ可能!

$(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( "わかりました!" ); 🎜>}
});
})