Jquery ui jquery ui：鼠标向下时可立即拖动_Jquery Ui_Draggable_Mousedown

Jquery ui jquery ui：鼠标向下时可立即拖动

jquery-ui

Jquery ui jquery ui：鼠标向下时可立即拖动,jquery-ui,draggable,mousedown,Jquery Ui,Draggable,Mousedown,使用jQuery UI，可以通过对mousedown事件应用.draggable（）方法使元素可拖动。然后在另一个鼠标上拖动（并拖动）。是否可以通过单次鼠标按下使元素可拖动并立即开始拖动（mousedown事件）发生了什么： 1）按blue rect并尝试拖动（元素不可移动） 2）取消选择rect并再次尝试拖动（元素是可移动的）应该发生什么： 1）按blue rect并将其拖动-->元素可移动 <!DOCTYPE html> <html> <he

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

发生了什么：

1）按blue rect并尝试拖动（元素不可移动）

2）取消选择rect并再次尝试拖动（元素是可移动的）

应该发生什么：

1）按blue 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>


按此键可拖动（）
#矩形{边框：1px点蓝色；宽度：100px；高度：100px；背景色：浅蓝色；}
$（文档）.ready（函数（）{
console.log（“文档已准备就绪”）；
$（'#rect'）.mousedown（函数（ev）{
console.log（ev.target.id+“按下”）；
$（ev.target）.draggable（）；
//$（this）.draggable（）；//的工作原理相同。
});
});

您需要在小部件初始化后重新触发

鼠标向下

事件。您可以为此使用

.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();