jquery-ui：鼠标按下时立即可拖动答案

【问题标题】：jquery-ui: immediate draggable on mousedownjquery-ui：鼠标按下时立即可拖动
【发布时间】：2016-11-07 11:42:15
【问题描述】：

使用 jQuery-UI，可以通过在 mousedown 事件上应用 .draggable() 方法来使元素可拖动。然后在另一个鼠标按下（并拖动）上拖动它。是否可以通过单击鼠标（mousedown 事件）使元素可拖动并立即开始拖动。

会发生什么：

1) 按蓝色矩形并尝试拖动（元素不可移动）；

2) 松开 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>

【问题讨论】：

标签： jquery-ui draggable mousedown

【解决方案1】：

您需要在小部件初始化后重新触发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/

【讨论】：