jQuery - 如何在拖动事件期间将可拖动的 div 动画化为移动光标答案

【问题标题】：jQuery - how to animate draggable div towards moving cursor during drag eventjQuery - 如何在拖动事件期间将可拖动的 div 动画化为移动光标
【发布时间】：2015-07-09 21:09:17
【问题描述】：

我正在使用可拖动的 jquery UI，并希望在拖动事件期间具有可拖动的 div 动画。想象一下，当静止时，示例中的方形 div 附着在磁铁上。当你点击它并开始拖动时，直到达到一定的距离阈值（距离 = div 中心与当前鼠标位置之间的距离），它才会拖动。达到该阈值后，div 将向鼠标移动，然后应该进行正常的拖动事件。

我的问题是，当鼠标以足够快的速度拖动超过距离阈值时，div 将开始闪烁，因为它正在显示动画 div 和正在拖动的 div 之间切换。发生的另一个问题是，如果您将鼠标拖得足够快然后停止，则 div 会动画到最后记录的鼠标位置，但是在进行计算时，鼠标可能已经在不同的位置，所以鼠标是在一个地方，而 div 在另一个地方。关于如何使 div 向鼠标设置动画然后在一个平滑过渡中继续拖动事件的任何想法？（另外，我希望动画足够长，以便您可以看到 div 移动。如果持续时间设置为 1，它可以正常工作，但我希望它更具视觉吸引力和流畅性）这是一个演示：http://jsfiddle.net/b84wn2nf/

以下是演示中的一些代码：

$(".dragSquare").draggable({
drag: function (event, ui) {

    if($(this).hasClass("stuck")){
    var mx = event.pageX;
    var my = event.pageY;
    ui.position.left = $(this).position().left;
    ui.position.top = $(this).position().top;

    var d = Math.floor(Math.sqrt(Math.pow(mx - ($(this).offset().left + ($(this).width() / 2)), 2) + Math.pow(my - ($(this).offset().top + ($(this).height() / 2)), 2)));
    console.log(d)
    if (d > 200) {
        var animateToX = event.pageX - $(this).width() / 2;
        var animateToY = event.pageY - $(this).height() / 2;

        $(this).stop(true, true).animate({
            left: animateToX + 'px',
            top: animateToY + 'px'
        }, {
            /*easing: 'easeOutBounce,'*/
            duration: 500,
            start: function () {},
            complete: function () {
                $(this).removeClass("stuck");
            }
        });
    }
    }
} });

【问题讨论】：

不使用 jQuery UI 并在 mousedown 事件中绑定到 mousemove 可能会简单得多
可能是这样，但我正在设计的页面已经超过一千行代码，如果不使用 jQuery 来做会困难得多。此时不使用 jQuery 为时已晚 ;)
我的意思是这个拖动动作。您的代码正在与 jQuery UI 的拖动 css 更改的内部竞争。这是一个简单的事件创建而不是在draggable

标签： javascript jquery jquery-ui jquery-animate draggable

【解决方案1】：

好的，所以我知道我很久以前就发布了这个，从那时起，我开始使用 Snap.js SVG 库而不是 jQuery，这使得取消拖动更容易，但在切换之前，我解决问题的唯一方法是：修改源代码。

在 jquery-ui.js 中，找到 jQuery UI Draggable 部分，然后向下滚动到 _mouseDrag 方法。您需要在自己的代码中设置一个全局变量来告诉 jQuery 您是否希望覆盖拖动行为。我使用“cancelDrag”作为变量名。因此，当它设置为 false 时，拖动行为正常。

在_mouseDrag中，你会看到如下代码：

this.helper[0].style.left = this.position.left + "px";
this.helper[0].style.top = this.position.top + "px";

你需要做的是把它包装在一个依赖于你的布尔变量的条件语句中，所以它看起来像这样：

if(!cancelDrag){
    this.helper[0].style.left = this.position.left + "px";
    this.helper[0].style.top = this.position.top + "px";
}

基本上，如果 cancelDrag 设置为 true，jQuery 拖动处理程序将不会改变元素的位置。它不理想，可能不应该使用，但它有效。确保如果您修改此文件，您没有使用缩小的源代码。

【讨论】：