jQuery制作元素随鼠标移动

Question

所以我可以使用鼠标移动元素，但问题是偏移是从元素的左上角计算的，并没有考虑鼠标在元素中的位置导致对象跳跃到鼠标并阻止您向上或向左拖动。

所以我想出了这个功能：

  handle.on("mousemove", function(e) {
    if (state.dragging) {
      var paneOffset = pane.offset();
      var mouseOffset = {
        'top': e.pageY - paneOffset.top,
        'left': e.pageX - paneOffset.left
      }
      pane.offset({
        top: e.pageY - mouseOffset.top,
        left: e.pageX - mouseOffset.left
      });
    }
  });

示例：http://jsfiddle.net/SEKxc/

这个问题是它会阻止元素移动，因为它总是计算元素的精确偏移量。如何使元素跟随鼠标，但相对于鼠标与对象的位置。

我知道jQueryUI内置了这个功能但不想使用它。

Answer 1

您可以在dragstart上计算初始鼠标偏移，因此可以将其用作mousemove处理程序中的全局变量。由于dragstart在鼠标移动之前开始，我没有看到问题。

更新：您需要存储对象初始偏移量和鼠标初始偏移量，并计算鼠标相对于mouseMove上原始对象的相对偏移量，然后将相同的变换应用于元素。

Answer 2

开始拖动时，存储鼠标位置和元素左上角之间的距离。然后，您只需从鼠标位置中减去那些，以便在鼠标移动时计算元素位置。