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可调整大小的小部件。另外，为什么在拖动元素之后而不是之前缩放元素？

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

1 个答案: