如何确定拖动事件相对于对象的开始位置

Posted 2023-02-25

【中文标题】如何确定拖动事件相对于对象的开始位置

【英文标题】：How to determine where a drag event began relative to an object

【发布时间】：2012-05-09 23:08:21

【问题描述】：

我有一个 100 x 100 像素的右上角和左下角图形，我用它来覆盖图像。这些代表裁剪标记。我有一个绑定到每个的拖动事件，可以让我拖动这些裁剪标记，然后调整图像大小。这一切都有效，但无论我点击角落图像的哪个位置，鼠标都会跳到图形左上角的左侧。由于图形是 100 x 100 像素，我可能点击了右下角。我希望鼠标（或手指）停留在最初单击（或触摸）的同一位置，而不是跳到左上角。查看事件返回的各种偏移量（或 this.offsetLeft、this.offsetTop）似乎都没有给我从指针结束位置到它开始位置的 x、y 偏移量。

有没有办法确定起点并保持拖动的接触点？

这是我的右上角/裁剪的拖动处理程序：

function ur_crop()

    $('#ur_corner').bind('drag', function (event) 
    event.preventDefault();
    curX = event.pageX; 
    curY = event.pageY; 
    offsetX = curX - ur_curX;
    offsetY = curY - ur_curY;
    var $this = $(this);
    $(this).css(
        left: curX + 'px', 
        top: curY + 'px' 
    );

    ur_curX = curX; // + offsetX;
    ur_curY = curY; // + offsetY;

);         

谢谢！

【参考方案1】：

选择角拖动后将jQuery的mousemove事件绑定在其中以获取鼠标的位置。

Check out jQuery's documentation for mousemove

【讨论】：

不幸的是，这不会产生任何额外的信息。 mousemove 事件返回的 pageX 和 pageY 与拖动事件返回的 pageX 和 pageY 相同。如果我使用这些坐标移动到鼠标光标立即跳转到裁剪标记的右上角约一英寸。目前我从 pageX 中减去 50 px，从 pageY 中减去 100 px，这至少将光标移到裁剪标记的左上角，但我仍然没有找到一种方法来确定鼠标指针（或手指）在裁剪上的确切位置标记鼠标按下或触摸发生的时间。