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></body> <br><br> <br><br>別のコンテナにドラッグする<br> <br>要素をコンテナ内の別のコンテナに移動します。これには、ドロップ ターゲット コンテナにドロップ可能関数を適用する必要があります。前の例に基づいて div をコンテナとして追加し、ドロップ可能関数を適用しましょう: </div> <br><strong></strong><br>コードをコピー <br><div class="codetitle"> <span> コードは次のとおりです。 <a style="CURSOR: pointer" data="64897" class="copybut" id="copybut64897" onclick="doCopy('code64897')"><u> </u></a><head</head> </span><div id="container"< div id="dragsource"> </div><p>ドラッグしてください!</p> <div class="codebody" id="code64897"></div><-- コンテナを終了します。 <BR><BR><div id="droppalbe" style="width: 300px;height:300px;background-color:gray"> <br><p>ここにドロップ</p> ;/div> <br><br><script type="text/javascript" src="js/jquery-1.7.min.js"><br><script type="text; /javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<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( "わかりました!" ); 🎜>}
});
})





複製アニメーション 上の例はすべて移動要素であり、もう 1 つの一般的な環境は複製要素です。

ヘルパーは、「オリジナル」、「クローン」を指定できます。「オリジナル」は承認済みの値、つまり自分自身を起動し、クローンは作成を示します。
自身が起動されていないときは、ターゲット上でドロップ イベント関数を指定する必要があります。この関数では、特定の元素がターゲット コンテナに追加されますが、ドロップされる場合にはいかなる事態も発生しません。
の単純化の例は次のとおりです。代码

代码如下: 頭>

拽我!

$(function() {
$( "#dragsource" ).draggable({
helper:"clone"
});

$("#container") .droppable({
drop:function(event,ui){
$(this).append($("

クローン

"));
}
})






制御

を現在の位置に移動すると、すべての例で制御を実行するためにソースを自由に動作させることができます。以下に例を示します。

移動方向
は、移動方向が x、y の 2 方向であることを許可します。ドラッグ可能な axis パラメータによって、水平または直角のみに制限できます。次のように:


代打

代打次のように:

頭>

－－

|

$(function() {
$("#dragX").draggable({axis:"x"});
$("#dragY").draggable({axis:"y" });
});





ドラッグ範囲
方向に加えて、ドラッグ範囲も包含パラメータを通じて制限できます。このパラメーターは、セレクター、要素、文字列、配列タイプを受け入れます。このうち、String は親、ドキュメント、ウィンドウのいずれかであり、Array は長方形の領域 (領域) [x1, y1, x2, y2] を指定する 4 要素の配列です。次の例では、parent と regin をそれぞれ範囲制限として指定します。

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

親
< /div>

🎜>

<スクリプトタイプ=" text/javascript" src="js/jquery-ui-1.8.16.custom.min.js">
<script> <br> >$ ("#draggable1" ).draggable({containment: "parent" }); <br>$("#draggable2").draggable({containment: [20,20,300,200] }); <br></script>




ドラッグ中でも使用可能他の要素またはグリッドにスナップします。次のように、snap パラメータを使用してスナップ先の要素を指定し、grid パラメータを使用してグリッドにスナップするように指定します。

コードをコピー

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

ドロップされない場合は元に戻ります

ここにドロップしてください

$(function() {
$( "#draggable2" ).draggable({ revert: "無効",cursor: "move",cursorAt: { 上: 56, 左: 56 } });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function(event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "ドロップされました!" ); >});
});





小型
JQuery UI は、非常に簡単に使用できると同時に、優れたユーザー インターフェイスを提供します。多くのパラメータは、公式ウェブサイトの Draggable
および Droppable を参照することもできます。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript 上級編 第 3 章 Ajax、JSON、プロトタイプ入門_基礎知識次の記事：JavaScript 上級編 第 3 章 Ajax、JSON、プロトタイプ入門_基礎知識

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved