可缩放容器鼠标上的可拖动元素在创建时从辅助对象上浮动

Draggable element on scalable container mouse floats away from helper on creation

本文关键字：对象 创建 元素 缩放 鼠标 拖动      更新时间：2023-09-26

我正试图在一个可伸缩元素上拖动一个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 });

您在基于鼠标位置而不是基于元素相对于鼠标位置的位置设置元素位置时遇到问题。这一点，再加上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'
            });

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

相关文章：