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

Question

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

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

重新定位在dragstart之前触发的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 option将鼠标光标定位在拖动的节点中：

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

这是一个jsFiddle。