可伸缩容器鼠标上的可拖动元素在创建时从帮助程序中浮动

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'
            });

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