jquery-ui：可立即在mousedown上拖動

使用jQuery-UI，可以通過在mousedown事件上應用.draggable（）方法使元素可拖動。然後在另一個鼠標按下並拖動它（並拖動）。是否可以使元素可拖動並通過單擊鼠標（mousedown事件）立即開始拖動。jquery-ui：可立即在mousedown上拖動

會發生什麼：

1）按藍色矩形並嘗試拖動（元素不可動的）;

2）unpress rect並嘗試再次拖動（元素是可移動的）。

應該發生什麼：

1）按藍色矩形並拖動它 - >元素是可移動的。

<!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事件。您可以使用.trigger此：

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

注意拖動數據檢查：你只能做一次（或者你會得到一個重新初始化窗口小部件和可能無限事件觸發遞歸）

而且，這是默認的行爲，如果你纔剛剛小部件拖動（例如，在文件就緒）

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

，而不是與mousedown在所有的麻煩。這是你應該做的，除非你有很好的理由堅持使用的情況下，這是不是在問題中提到

小提琴：https://jsfiddle.net/9ame9ege/

來源

2016-11-07 15:09:17 blgt

jquery-ui：可立即在mousedown上拖動

回答

相關問題