Question

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

会发生什么：

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

2）unpress rect并尝试再次拖动（元素可移动）。

应该发生什么：

1）按蓝色矩形并拖动它 - ＆gt;元素是可移动的。

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

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

jquery-ui：在mousedown

1 个答案: