可伸缩容器鼠标上的可拖动元素在创建时从助手浮动答案

【问题标题】：Draggable element on scalable container mouse floats away from helper on creation可伸缩容器鼠标上的可拖动元素在创建时从助手浮动
【发布时间】：2015-05-09 04:26: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 });

【问题讨论】：

您需要移动支持吗？

标签： javascript jquery html css jquery-ui

【解决方案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 resizable 小部件，而不是自己重写它。另外，为什么你在拖动元素之后而不是之前缩放元素？

【讨论】：