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

Question

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

会发生什么:

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>

Answer 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。这是你应该做的，除非你有很好的理由坚持使用这个问题中没有提到的事件

Fiddle: https://jsfiddle.net/9ame9ege/

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

jquery-ui: immediate draggable on mousedown

jquery-ui

draggable

mousedown