如何获取父容器内可拖动div的左上角坐标，onmove事件不生效如何解决

为什么onmove事件不生效 #

原生HTML DOM没有针对普通DIV元素的onmove事件，该事件仅在SVG动画、SMIL动画等少数特殊场景中支持，普通元素位置变更不会主动触发该事件，所以你绑定的onmove回调不会执行。

最优解决方案 #

你现有的自定义拖拽逻辑已经包含位置更新的触发点，直接在位置更新的代码段中插入坐标获取逻辑即可，无需额外监听事件：

1. 首先删除HTML中mydivheader标签上的onmove="showCoords(event)"无效属性
2. 修改elementDrag函数，在元素位置更新后直接调用坐标展示方法：

function elementDrag(e) {
  e = e || window.event;
  e.preventDefault();
  // calculate the new cursor position:
  pos1 = pos3 - e.clientX;
  pos2 = pos4 - e.clientY;
  pos3 = e.clientX;
  pos4 = e.clientY;
  
  let parentElement = elmnt.parentElement;
  if(elmnt.offsetTop < 0){elmnt.style.top = "0px"; return;}
  if(elmnt.offsetTop > (parentElement.offsetHeight - elmnt.offsetHeight))     {
      elmnt.style.top = (parentElement.offsetHeight - elmnt.offsetHeight) + "px"; 
      return;
    }
  if(elmnt.offsetLeft < 0){elmnt.style.left = "0px";return}
  if(elmnt.offsetLeft > (parentElement.offsetWidth - elmnt.offsetWidth)){
      elmnt.style.left = (parentElement.offsetWidth - elmnt.offsetWidth) + "px";
      return;
  }
  
  // set the element's new position:
  elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
  elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  // 新增代码：直接传递拖拽元素相对于父容器的左上角坐标
  showCoords(elmnt.offsetLeft, elmnt.offsetTop)
}

3. 调整showCoords函数适配传入的坐标值：

function showCoords(x, y) {
  var coor = "X坐标: " + x + "px, Y坐标: " + y + "px";
  document.getElementById("demo").innerHTML = coor;
}

通用监听方案（适配第三方拖拽场景） #

如果你的拖拽逻辑不是自己实现的（比如使用了第三方拖拽库），可以用MutationObserver监听元素的style属性变更，实现位置变化的自动捕获：

const observer = new MutationObserver((mutations) => {
  const targetEl = document.getElementById('mydiv')
  showCoords(targetEl.offsetLeft, targetEl.offsetTop)
})
observer.observe(document.getElementById('mydiv'), {
  attributes: true,
  attributeFilter: ['style']
})

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