JQuery UIのドラッグ&ドロップ機能の実現方法のまとめ

13174 ワード

JQuery UIのドラッグ&ドロップ機能の実現方法のまとめ
作者:フォント:[増加減少]タイプ:転載
JQuery UIは、JQueryが公式にサポートしているWebUIコードライブラリであり、下位レベルのインタラクション、アニメーション、特効などのAPIを含み、いくつかのWebウィジェット(Widget)をカプセル化しています.同時に、JQuery UIはjqueryのプラグインサポートを継承し、多くのサードパーティプラグインがJQuery UIの機能を豊富にすることができる.
JQuery UIが提供するAPIは、ドラッグ機能の開発を大幅に簡素化しています.ドラッグソース(source)とターゲット(target)のそれぞれにdraggableとdroppableの2つの関数を上げるだけです.ドラッグ原理はまずいくつかの概念を明確にしなければならない.ource:ソース、ドラッグする要素をドラッグします.taerget:ターゲットをドラッグ&ドロップし、sourceのコンテナに入れることができます.ドラッグの動作は以下のように分解される:1.drag start:ドラッグソースでマウスを押して移動を開始します.drag move:移動中3.drag enter:ターゲットコンテナ4に移動する.drag leave:ターゲット容器5を取り出す.drop:ターゲットコンテナからマウス6を離す.drag end:html 5が終了するまで、ページ要素はドラッグイベントを直接サポートしません.したがって、マウスイベントを傍受し、ドラッグ状態を記録することでドラッグ機能を実現します.最も簡単な例で最も簡単なドラッグ&ドロップは、要素が存在する容器を変更せず、その位置だけを変更することです.例は次のとおりです.

 
   
 <html>  
   
 <head></head>  
   
 <body>  
   
 <div id="container">  
   
 <div id="dragsource">  
   
 <p>  !</p>  
   
 </div>  
   
 </div><!-- End container -->  
   
 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>  
   
 <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>  
   
 <script>  
   
 $(function() {  
   
 $( "#dragsource" ).draggable();  
   
 })  
   
 </script>  
   
 </body>  
   
 </html>

別のコンテナにドラッグ
より一般的なシーンは、要素を別のコンテナにドラッグすることです.これはdropターゲットコンテナにdroppable関数を適用する必要がある.前の例に基づいてdivをコンテナとして追加しdroppable関数を適用します.

 
   
 <html>  
   
 <head></head>  
   
 <body>  
   
 <div id="container">  
   
 <div id="dragsource">  
   
 <p>  !</p>  
   
 </div>  
   
 </div><!-- End container -->  
   
 
   
 <div id="droppalbe" style="width: 300px;height:300px;background-color:gray">  
   
 <p>Drop here</p>  
   
 </div>  
   
 
   
 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>  
   
 <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>  
   
 <script>  
   
 $(function() {  
   
 $( "#dragsource" ).draggable();  
   
 $( "#droppable" ).droppable();  
   
 })  
   
 </script>  
   
 </body>  
   
 </html>

イベントのリスニングとエコー(Feedback)
前の例を実行すると、本当にターゲットコンテナに置いたのか疑問に思うかもしれません.ユーザーも同様の疑問を抱く.したがって、ドラッグ中に発生したイベントをリスニングし、表示された方法でユーザーに知らせることができます.これをFeedback(Feedback)と呼ぶ.
ソース(source)の場合、リスニングできるイベントは次のとおりです.
create:draggable関数をsourceに適用するとトリガーされます
start:ドラッグ開始時にトリガー
drap:ドラッグ中にトリガー
stop:リリース時にトリガー
ターゲット(target)の場合、リスニング可能なイベントは次のとおりです.
create:targetにdroppable関数を適用するとトリガーされます
Activate:現在ドラッグしているsourceが本targetにdropできる場合、トリガー
deactivate:dropから本targetへのドラッグ停止が可能な場合、トリガー
over:sourceはtargetの上にドラッグされます
out:sourceはtargetからドラッグされます
drop:sourceはtargetに解放されます
イベント処理関数はdraggableとdroppable関数のパラメータによって伝達され,これらのイベント処理関数でFeedbackを行うことができる.実際の例を見てみましょう.

 
   
 <html>  
   
 <head>  
   
 
   
 </head>  
   
 <body>  
   
 <div id="dragsource">  
   
 <p id="targetMsg">:-|</p>  
   
 </div>  
   
 
   
 <div id="droppable" style="background-color:gray;height:300">  
   
 <p>Can drop! </p>  
   
 </div>  
   
 
   
 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>  
   
 <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>  
   
 <script>  
   
 $(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( "Drop here !" );  
   
 },  
   
 over: function(event,ui) {  
   
 $( this ).find( "p" ).html( "Oh, Yeah!" );  
   
 
   
 },  
   
 out: function(event,ui) {  
   
 $( this ).find( "p" ).html( "Don't leave me!" );  
   
 
   
 },  
   
 drop: function( event, ui ) {  
   
 $( this ).find( "p" ).html( "I've got it!" );  
   
 }  
   
 });  
   
 })  
   
 </script>  
   
 </body>  
   
 </html>

コピードラッグ
前の例はすべて要素を移動し、もう1つの一般的なシーンはコピードラッグです.たとえばvisioのパネルからキャンバスに要素をドラッグします.これはdraggable関数のhelperパラメータによって設定されます.
helperは「original」、「clone」と指定できます.ここで、「original」はデフォルト値です.つまり、自身をドラッグします.cloneは、ドラッグするために独自のクローンを作成することを示します.helperはまた、ドラッグ&ドロップのためにカスタムDOM要素を返す関数として指定することもできます.
自身をドラッグしない場合は、targetにdropイベント関数を指定する必要があります.この関数で特定の要素をtargetコンテナに追加しないと、dropの場合は何も起こりません.
簡単なコピーの例は次のとおりです.

 
   
 <html>  
   
 <head></head>  
   
 <body>  
   
 
   
 <div id="dragsource">  
   
 <p>  !</p>  
   
 </div>  
   
 <div id="container" style="background-color:gray;height:300">  
   
 </div><!-- End container -->  
   
 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>  
   
 <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>  
   
 <script>  
   
 $(function() {  
   
 $( "#dragsource" ).draggable({  
   
 helper:"clone"  
   
 });  
   
 
   
 $("#container").droppable({  
   
 drop:function(event,ui){  
   
 $(this).append($("<p style='position:absolute;left:"+  
   
 ui.offset.left+";top:"+ui.offset.top+"'>clone</p>"));  
   
 }  
   
 });  
   
 })  
   
 </script>  
   
 </body>  
   
 </html>

ドラッグコントロール
現在の位置まで、すべての例でsourceを任意にドラッグできます.実際のアプリケーションでは、ドラッグ動作を制御する必要があることがよくあります.以下にいくつかの例を示す.
ドラッグ方向
デフォルトのドラッグ方向はx,yの2方向です.draggableのaxisパラメータにより、水平または垂直ドラッグのみを制限できます.次のようになります.

 
   
 <html>  
   
 <head></head>  
   
 <body>  
   
 
   
 <div id="dragX">  
   
 <p>－－</p>  
   
 </div>  
   
 <div id="dragY">  
   
 <p>|</p>  
   
 </div>  
   
 
   
 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>  
   
 <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>  
   
 <script>  
   
 $(function() {  
   
 $("#dragX").draggable({axis:"x"});  
   
 $("#dragY").draggable({axis:"y"});  
   
 });  
   
 </script>  
   
 </body>  
   
 </html>

ドラッグ範囲
方向に加えて、containmentパラメータでドラッグの範囲を拘束することもできます.このパラメータは、Selector、Element、String、Arrayタイプを受け入れます.ここでStringはparent,document,window,Arrayとして矩形領域(regin)を指定する四元配列である:[x 1,y 1,x 2,y 2].次の例では、parentとreginを範囲制限として指定します.

 
   
 <html>  
   
 <head></head>  
   
 <body>  
   
 <div id="container" style="background-color:gray;height:300">  
   
 <div id="draggable1" style="background-color:red;height:20;width:100">  
   
 <p>in parent</p>  
   
 </div>  
   
 
   
 <div id="draggable2" style="background-color:green;height:20;width:100">  
   
 <p>in regin</p>  
   
 </div>  
   
 
   
 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>  
   
 <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>  
   
 <script>  
   
 $(function() {  
   
 $("#draggable1" ).draggable({containment: "parent" });  
   
 $("#draggable2").draggable({containment: [20,20,300,200] });  
   
 });  
   
 </script>  
   
 </body>  
   
 </html>

ドラッグ吸着
ドラッグ時に他の要素やメッシュに吸着することもできます.snapパラメータを使用して吸着する要素を指定し、gridパラメータを使用してグリッドに吸着する要素を指定します.次のようにします.

 
   
 <html>  
   
 <head>  
   
 <style>  
   
 .draggable {background-color:green; width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }  
   
 </style>  
   
 </head>  
   
 <body>  
   
 <div id="container" style="background-color:gray;height:300">  
   
 <div id="draggable1" class="draggable">  
   
 <p>          </p>  
   
 </div>  
   
 
   
 <div id="draggable2" class="draggable">  
   
 <p>     </p>  
   
 </div>  
   
 
   
 <div id="draggable3" class="draggable">  
   
 <p>     (30x30)</p>  
   
 </div>  
   
 </div><!--container-->  
   
 
   
 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>  
   
 <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>  
   
 <script>  
   
 $(function() {  
   
 $("#draggable1").draggable({ snap: true });  
   
 $("#draggable2").draggable({ snap: "#container"});  
   
 $("#draggable3").draggable({grid: [30,30]});  
   
 });  
   
 </script>  
   
 </body>  
   
 </html>

ドラッグハンドル
デフォルトでは、要素全体をドラッグするか、ドラッグするhandleとして要素のサブ要素を指定できます.たとえば、次のようになります.

 
   
 <div id="draggable">  
   
 <p>handle</p>  
   
 </div>  
   
 ……  
   
 <script>  
   
 $("#draggable").draggable({handle:"p"});  
   
 </script>

Drop制限
デフォルトのdroppable指定要素はすべてのdropを受け入れることができますが、acceptパラメータによって一部の要素しか受け入れられないdropを定義できます.acceptパラメータのタイプはjquery selectorに適合する文字列です.例:
$(".selector").droppable({ accept: '.special' })
specialスタイルを持つ要素のみを受け入れることを示します.
ユーザーエクスペリエンスの向上
以前はドラッグ&ドロップ機能を実現していましたが、JQueryUIにはユーザー体験を向上させるパラメータもあります.たとえば、cursorパラメータはマウスポインタの形状を指定し、cursorAtはマウスポインタのsourceの相対位置を指定し、revertはdropが失敗したときにsourceが元の位置に戻ることを指定します.1つの組み合わせの例は次のとおりです.

 
   
 <html>  
   
 <head>  
   
 <style>  
   
 .draggable {background-color:green; width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }  
   
 .droppable { width: 300px; height: 300px; background-color:red}  
   
 
   
 </style>  
   
 </head>  
   
 <body>  
   
 <div id="draggable2" class="draggable">  
   
 <p>I revert when I'm not dropped</p>  
   
 </div>  
   
 
   
 <div id="droppable" class="droppable">  
   
 <p>Drop me here</p>  
   
 </div>  
   
 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>  
   
 <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>  
   
 <script>  
   
 $(function() {  
   
 $( "#draggable2" ).draggable({ revert: "invalid",cursor: "move", cursorAt: { top: 56, left: 56 } });  
   
 $( "#droppable" ).droppable({  
   
 activeClass: "ui-state-hover",  
   
 hoverClass: "ui-state-active",  
   
 drop: function( event, ui ) {  
   
 $( this )  
   
 .addClass( "ui-state-highlight" )  
   
 .find( "p" )  
   
 .html( "Dropped!" );  
   
 }  
   
 });  
   
 });  
   
 </script>  
   
 </body>  
   
 </html>

小結
JQuery UIは強力なドラッグ&ドロップ機能と優れたユーザー体験を提供し、同時に非常に使いやすいです.よく使われる様々な使い方を紹介した.さらに多くのパラメータは、公式サイトのDraggableとDroppableを参照することもできます.

LintCode 636. 132 Pattern

JAvaScriptにおける配列拡張