jquery - 在 jquery 中触发事件 dragstart 时重新定位元素

Question

我正在尝试在触发 dragstart 事件时重新定位项目。

在拖动之前，该项目应从鼠标在屏幕上的当前位置重新定位。

重新定位在 dragstart 之前触发的 on mousedown 事件的选项对于我正在寻找的内容没有用。

我正在尝试这种方式：

var xMouse = 0;
var yMouse = 0;

$(document).mousemove(function(e){
    xMouse = e.pageX; 
    yMouse = e.pageY;
});

$( "#obj" ).draggable({ 
    revert: false,
    start: function() { 
        $( "#obj" ).css("left", xMouse+"px");
        $( "#obj" ).css("top", yMouse+"px");    
    }
});

$( "#obj" )
.bind('dragstart',function( event ){
    $( "#obj" ).css("left", xMouse+"px");
    $( "#obj" ).css("top", yMouse+"px");                    
})
.bind('drag',function( event){

})

提前致谢。

Answer 1

问题是 jQuery UI 的“拖动”使用绝对定位来移动节点，因此您在拖动开始时的手动定位被完全覆盖。也就是说，您可以使用该cursorAt 选项将鼠标光标定位在拖动的节点中：

$( "#obj" ).draggable({ 
  revert: false,
  cursorAt: { left: 0, top: 0 }
});

这是一个jsFiddle。