javascript - 可缩放容器鼠标上的可拖动元素在创建时远离助手

Question

我正在尝试在可缩放元素上拖动一个 div，当我拖动它时，鼠标似乎在创建时从助手那里飘走了。谁能帮我解决这个问题？

这是一个jsfiddle我的代码低于我尝试过的代码。

$("div.text").draggable({
    zIndex: 3000,
    appendTo: 'body',
    helper: function (e, ue) {
        return $(this).css({
            'transform': 'scale(' + percent + ')',
            '-moz-transform': 'scale(' + percent + ')',
            '-webkit-transform': 'scale(' + percent + ')',
            '-ms-transform': 'scale(' + percent + ')'
        }).appendTo('body');
    }
});

我也试过这个，它在高 percent 期间有一些帮助，但是当你将容器缩放得更小时仍然是关闭的。

return $(this).css({
    'transform': 'scale(' + percent + ')',
    '-moz-transform': 'scale(' + percent + ')',
    '-webkit-transform': 'scale(' + percent + ')',
    '-ms-transform': 'scale(' + percent + ')'
}).appendTo('body').offset({ top: e.pageY, left: e.pageX });

Answer 1

您在根据鼠标位置而不是根据元素相对于鼠标位置的位置设置元素位置时遇到问题。那，再加上 dragStart 上的元素按比例缩小，导致它跳转到光标位于中心的位置，然后在按比例放大后跳到光标上方。您可以使用 getBoundingClientRect() 确定元素的实际位置，然后使用 JS 手动设置。

            var containerBox = $(this)[0].getBoundingClientRect();
            var docBox = document.body.getBoundingClientRect();

            startTop = containerBox.top - docBox.top;
            startLeft = containerBox.left - docBox.left;

            $(this).css({
              position: 'fixed',
              top: startTop + 'px',
              left: startLeft + 'px',
              height: containerBox.height + 'px',
              width: containerBox.width + 'px'
            });

我没有用你的 fiddle 试过，但它很可能会解决你的问题。此外，如果您正在寻找可调整大小的功能，那么您也应该使用 jquery UI 可调整大小的小部件，而不是自己重写它。另外，为什么在拖动元素之后而不是之前缩放元素？