解决可拖拽元素停止拖拽后无法获取left和top位置的问题

你的getTopLeftPosition函数报错Cannot read properties of undefined (reading 'left')，主要是两个核心问题：

1. 调用函数时没有传递正确的参数，导致e为undefined，自然无法访问e.pageX
2. 函数内部的this没有指向当前拖拽的元素，同时你其实没必要自己计算位置——jQuery UI的draggable组件在stop回调里已经提供了现成的位置数据

下面给你两种简单的修正方案，选一种就行：

方案一：直接利用jQuery UI提供的ui对象（推荐） #

这个方案最省心，因为组件已经帮你计算好了位置，不需要自己折腾坐标：

首先修改stop回调里的函数调用，把ui对象传进去：

stop: function (event, ui) { 
  console.log(ui); 
  $('#groups-parent').css({ 
    'min-height': Math.max(500, ui.position.top + 50) 
  }); 
  $(this).addClass('obstacle'); 
  getTopLeftPosition(ui); // 把ui对象传给函数
} 

然后修改getTopLeftPosition函数，直接从ui里取位置：

function getTopLeftPosition(ui) { 
  // ui.position里的left和top是元素相对于父容器的坐标
  var coordX = ui.position.left; 
  var coordY = ui.position.top; 
  alert(coordX + ' , ' + coordY); 
}

方案二：传递当前拖拽元素，手动获取位置 #

如果你想自己获取位置，可以把当前拖拽的DOM元素传给函数，用jQuery的position()方法获取相对于父容器的坐标：

修改stop回调的调用：

stop: function (event, ui) { 
  // ...其他代码不变
  getTopLeftPosition($(this)); // 把当前拖拽元素的jQuery对象传进去
} 

然后修改函数：

function getTopLeftPosition($dragElement) { 
  // position()获取相对于父容器的位置
  var elementPosition = $dragElement.position();
  var coordX = elementPosition.left;
  var coordY = elementPosition.top;
  alert(coordX + ' , ' + coordY); 

  // 如果需要相对于整个文档的坐标，用offset()方法：
  // var elementOffset = $dragElement.offset();
  // var coordX = elementOffset.left;
  // var coordY = elementOffset.top;
}

为什么原来的代码不行？ #

• 你调用getTopLeftPosition()时没有传参数，所以函数里的e是undefined，访问e.pageX就会报错
• 即使你传了event，函数内部的this也不会指向当前拖拽元素（直接调用函数时，this默认指向全局对象或严格模式下的undefined），所以$(this).offset()也会出错

内容的提问来源于stack exchange，提问作者Baba