Javascript jQuery-如何在拖动事件期间设置可拖动div朝向移动光标的动画

我正在使用jquery UI DragTable，希望在拖动事件期间设置一个DragTable div的动画。假设静止时，示例中的方形div连接到磁铁。如果您单击它并开始拖动，它将不会拖动，直到达到某个距离阈值（距离=div中心和当前鼠标位置之间的距离）。达到该阈值后，div将朝向鼠标设置动画，然后应继续执行正常的拖动事件

我的问题是，当鼠标以足够快的速度拖动超过距离阈值时，div将开始闪烁，因为它正在显示动画div和正在拖动的div之间切换。出现的另一个问题是，如果拖动鼠标的速度足够快，然后停止，div将动画显示到上次记录的鼠标位置，但在进行计算时，鼠标可能已经位于不同的位置，因此鼠标位于一个位置，div位于另一个位置。关于如何使div朝向鼠标设置动画，然后在平滑过渡中继续拖动事件，有什么想法吗？（另外，我希望动画足够长，以便您可以看到div移动。如果duration设置为1，则效果很好，但我希望它在视觉上更吸引人且更平滑）下面是一个演示：

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

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

---

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

在jquery-ui.js中，找到jquery ui可拖动部分，然后向下滚动到_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拖动处理程序将不会更改元素的位置。它并不理想，可能也不应该被使用，但它是有效的。请确保如果修改此文件，您不会使用缩小的源文件。

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

在jquery-ui.js中，找到jquery ui可拖动部分，然后向下滚动到_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拖动处理程序将不会更改元素的位置。它并不理想，可能也不应该被使用，但它是有效的。确保如果修改此文件，您没有使用缩小的源。

如果不使用jQuery UI，只需绑定到

mousedown

事件中的

mousemove

，可能会更简单，但是我正在设计的页面已经有上千行代码了，如果没有jQuery的话，那么做起来会困难得多。现在不使用jQuery已经太晚了；）因为这个拖动动作就是我的意思。您的代码正在与jQueryUI的拖动css更改的内部内容竞争。这是一个简单的创建事件，而不是在

draggable

中创建，如果不使用jQuery UI，只绑定到

mousedown

事件中，可能会简单得多，但是我正在设计的页面已经有上千行代码了，如果没有jQuery的话，那么做起来会困难得多。现在不使用jQuery已经太晚了；）因为这个拖动动作就是我的意思。您的代码正在与jQueryUI的拖动css更改的内部内容竞争。这是一个简单的创建事件，而不是在

draggable