可缩放容器上的可拖动元素，在创建时鼠标离辅助线太远。

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

我也尝试了这个方法，可以在高百分比时有所帮助，但是当你缩小容器的规模时还是不准确的。

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

- bryan

---

你需要移动设备支持吗？ - ChaosClown

Answer 1

您在设置元素位置时遇到了问题，该位置是基于鼠标位置而不是相对于鼠标位置的元素位置。这与拖动开始时元素缩小结合使用会导致它跳到光标在中心的位置，然后在光标上方，因为它会放大。您可以使用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 resizable小部件，而不是自己重写它。另外，为什么你要在拖动元素之后才进行缩放，而不是之前呢？

- Rorschach120