jQuery UI Draggable：鼠标移动速度比可拖动 div 快答案

【问题标题】：jQuery UI Draggable: Mouse moves faster than draggable divjQuery UI Draggable：鼠标移动速度比可拖动 div 快
【发布时间】：2018-08-02 12:44:57
【问题描述】：

正如标题所描述的，当我移动鼠标时，鼠标的移动速度比 div 快，而我希望 div 在移动时保持在鼠标光标下方。我正在使用 jQuery UI 1.12.1 和 jQuery 3.3.1。我使用了函数的默认选项。

HTML

<div class="popup"></div>

jQuery

$(function()
{
    $(".popup").draggable();
});

任何想法为什么会发生这种情况？

【问题讨论】：

您好，欢迎来到 StackOverflow。如果您可以请在您的帖子中添加一个最小的、完整的和可验证的示例，这将使别人更容易帮助您。 stackoverflow.com/help/mcve
@ltd9938 添加了一些代码

标签： javascript jquery html css jquery-ui

【解决方案1】：

是的！如果存在此类问题。鼠标光标相对于活动元素的位置。用户开始拖动后，光标立即移动到元素的中心。通过这样做，您的问题得到解决，鼠标光标被击中活动 div 的中心。直到你离开鼠标光标.. 这是我上面所说的代码.....

<!-- Javascript and Jquery-->

$('div').on('mousedown', function (e) {

    $(this).addClass('active').parents().on('mousemove', function (e) {

        $('.active').offset({

            top: e.pageY - $('.active').outerHeight() / 2,
            left: e.pageX - $('.active').outerWidth() / 2

        }).on('mouseup', function () {

            $(this).removeClass('active');

        });
        
    });
    
    return false;    
});

div {
    cursor: move;
    width:70px;
    height:70px;
    background:black;
    z-index: 1;
    margin:2px;
    float:left;
}
.active {
    background: grey;
    z-index: 2;
}

<!-- HTML-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

【讨论】：