javascript - jquery-ui - 无法修复拖动元素的鼠标位置

Question

拖动元素时，Jquery-UI 出现问题。问题是我希望拖动的元素更小，这会导致拖动时出现问题。我尝试使用 event.pageX 和 event.pageY 但这不起作用。

请检查 fiddle (不要介意丢失的图像)。问题是拖动时被拖动元素的位置: http://jsfiddle.net/rkochev/Ln5ovxov/3/

$('.drag').draggable({
    cursor: 'hand',
    containment: '#container',
    revert: true,
    revertDuration: 500,
    drag: function(event, ui)
    {
        $(this).css("width","41px").css("height","40px").css("font-size","3px");
        $(this).css("left",event.pageX+"px").css("top",event.pageY+"px");
    },
    stop: function(event, ui)
    {
        $(this).css("width","217px").css("height","97px").css("font-size","15px");
        var num = parseInt( $(this).attr('id').split("_")[1] );
    }
});

我希望拖动时被拖动的元素位于鼠标指针的中心。

如果有任何建议，我将不胜感激。

非常感谢，
雷达表

Answer 1

如果您想拖动一些静态内容，请使用 cursorAt 属性，如下所示:

...cursorAt: { top: 17, left: 17 },...

如果您使用动态内容，可能您可能会使用 draggable 插件的 helper 属性 ( read here )