使用innerHTML追加HTML后draggedElement.position()返回NaN是什么原因

问题根因 #

你调用this.node.innerHTML += html时，浏览器会执行两个步骤：

1. 清空this.node下所有已有的子DOM节点，销毁原有DOM元素的渲染绑定
2. 将拼接后的完整HTML字符串重新解析为新的DOM节点，挂载到this.node下

你的draggedElement.node在之前的逻辑中已经被追加到了this.node的子节点中，innerHTML操作后，draggedElement持有的还是已经被销毁、脱离当前DOM渲染树的旧节点引用。

为什么styles()、node属性返回正常 #

• draggedElement.node是对象引用，只要没有手动覆盖，永远指向你之前保存的旧DOM对象，不会因为DOM重建自动更新
• styles()方法读取/修改的是DOM对象本身的style属性，哪怕节点脱离渲染树，这个属性依然存在于对象上，所以返回结果不会变

而position()方法依赖getBoundingClientRect()计算布局，脱离渲染树的游离节点没有布局信息，浏览器会返回空的DOMRect对象，自然就出现了top/left为0、宽高为NaN的结果。

解决方案 #

• 优先改用insertAdjacentHTML追加内容，不会重建现有子节点，完全规避该问题：

// 替换原来的 this.node.innerHTML += html
this.node.insertAdjacentHTML('beforeend', html)

• 如果必须使用innerHTML操作，操作完成后需要根据元素ID重新查询最新的DOM节点，更新draggedElement的引用
• 可将可拖动元素始终挂载在document.body下，避免被canvas节点的DOM重建操作波及

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