我实现了另一个解决方案，我认为很简单，所以我想和你们分享一下。

所以，对我来说，问题是拖动的div将跳转到0,0的鼠标光标。所以我需要捕捉鼠标在div上的位置来调整div的新位置。

我读取的divs PageX和PageY，并设置的顶部和左侧的根据，然后得到的值，调整坐标，以保持光标在div的初始位置，我使用onDragStart监听器和存储e.nativeEvent.layerX和e.nativeEvent.layerY，只有在初始触发器给你的鼠标位置在可拖动的div。

示例代码:

 onDrag={(e) => {
          let newCoords;
          newCoords = { x: e.pageX - this.state.correctionX, y: e.pageY - this.state.correctionY };
          this.props.onDrag(newCoords, e, item.id);
        }}
        onDragStart={
          (e) => {
            this.setState({
              correctionX: e.nativeEvent.layerX,
              correctionY: e.nativeEvent.layerY,
            });
          }

我希望这能帮助那些和我经历过同样问题的人:)

Mark van Wyk的回答让我找到了正确的方向，但并没有完全解决我的问题。我仍然在另一个元素中包含的元素中绘画。

以下解决了它为我:

        x = e.pageX - this.offsetLeft - $(elem).offset().left;
        y = e.pageY - this.offsetTop - $(elem).offset().top;

换句话说，我简单地堆叠了所有嵌套元素的偏移量

使用此方法快速获取鼠标位置:

Object.defineProperty(MouseEvent.prototype, "mouseX", {
   get() {
      return this.clientX - this.currentTarget.getBoundingClientRect().left;
   }
});
Object.defineProperty(MouseEvent.prototype, "mouseY", {
   get() {
      return this.clientY - this.currentTarget.getBoundingClientRect().top;
   }
});

例子:

document.body.onmousemove=function(e){console.log(e.mouseX,e.mouseY)}

对于使用JQuery的人:

有时，当您嵌套元素时，其中一个元素附加了事件，可能会让您难以理解浏览器将什么视为父元素。在这里，您可以指定哪个父节点。

取鼠标位置，然后从父元素的偏移位置中减去它。

var x = evt.pageX - $('#element').offset().left;
var y = evt.pageY - $('#element').offset().top;

如果你想在滚动窗格中获取页面上的鼠标位置:

var x = (evt.pageX - $('#element').offset().left) + self.frame.scrollLeft();
var y = (evt.pageY - $('#element').offset().top) + self.frame.scrollTop();

或相对于页面的位置:

var x = (evt.pageX - $('#element').offset().left) + $(window).scrollLeft();
var y = (evt.pageY - $('#element').offset().top) + $(window).scrollTop();

注意以下性能优化:

var offset = $('#element').offset();
// Then refer to 
var x = evt.pageX - offset.left;

通过这种方式，JQuery不必为每一行查找#element。

更新

在@anytimecoder的回答中有一个更新的、仅支持javascript的版本——另请参阅浏览器对getBoundingClientRect()的支持。

关于这个问题的难点可以在这里找到:http://www.quirksmode.org/js/events_properties.html#position

使用这里描述的技术，您可以在文档中找到鼠标的位置。然后你只需检查它是否在元素的边界框内，你可以通过调用element. getboundingclientrect()来找到它，它将返回一个具有以下属性的对象:{bottom, height, left, right, top, width}。由此，判断偶数是否发生在元素内部是很简单的。

这是我得到的。

    $(".some-class").click(function(e) {

    var posx = 0;
    var posy = 0;

    posx = e.pageX;
    posy = e.pageY;

    alert(posx);
    alert(posy);
});