jquery-ui：mousedownで即時にドラッグ可能

jQuery-UIを使用して、mousedownイベントで.draggable（）メソッドを適用することで、要素をドラッグ可能にすることができます。そしてそれを別のマウスを押してドラッグします。要素をドラッグ可能にして、マウスを1回押すだけですぐにドラッグを開始することができますか（mousedownイベント）。jquery-ui：mousedownで即時にドラッグ可能

何起こる：

1）を押して青RECTと（要素可動ではない）をドラッグしてみてください。

2）再度押さえてドラッグします（要素は移動可能です）。

何起こるべき：

1）を押して青RECTし、それをドラッグ - >要素が移動可能です。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>draggable() on press</title> 
     <meta charset='UTF-8'/> 
     <style>#rect{ border: 1px dotted blue; width:100px; height:100px; background-color: lightblue;}</style> 
     <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> 
     <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script> 
     <script> 
      $(document).ready(function(){ 
       console.log('document is ready'); 
       $('#rect').mousedown(function(ev){ 
        console.log(ev.target.id+' pressed'); 
        $(ev.target).draggable(); 
        // $(this).draggable(); // Works the same. 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id='rect'></div> 
    </body> 
</html>

出典

2016-11-07 Andrey

ウィジェットの初期化後にmousedownイベントを再トリガーする必要があります。また、あなたは一度だけこれをしなければならない（またはあなたが再初期化ウィジェットと、おそらく無限のイベントトリガーの再帰を取得したい）

：

$('#rect').mousedown(function(ev){ 
    console.log(ev.target.id+' pressed'); 
    if (!$(ev.target).data("ui-draggable")) { 
     $(ev.target).draggable(); 
     $(ev.target).trigger(ev); 
    } 
});

注ドラッグ可能なデータチェック：あなたはこのため.triggerを使用することができますあなたが唯一のちょうどウィジェットドラッグ（例えば、文書対応の）

$("#rect").draggable();

と全くmousedownを気にすれば、これはデフォルトの動作です。 https://jsfiddle.net/9ame9ege/

：これは、あなたが質問

フィドルで言及されていないイベントを使用して主張することは非常に良い理由を、持っていない限り、あなたは何をすべきかであります

出典

2016-11-07 15:09:17 blgt

jquery-ui：mousedownで即時にドラッグ可能

答えて

関連する問題