我目前正在 vuejs 中实现一个待办事项应用程序。 todo 应用程序必须具有拖放功能，允许用户在列表中的元素之前或之后拖动，并且应该在拖放时更新 dom。我无法使用其他模块，例如 vue Draggable 或 sortable js。
目前我的代码在 vuejs 模板中列出了带有 v-for 标签的待办事项，我使用纯 JavaScript 来检测拖动的项目应该放置在哪里，并通过获取拖动的元素，然后附加它或插入它来更新 dom在某个位置。
这只适用于 dom，对于 todo 对象，我监听拖放事件，并执行相同的操作。我计算该项目应放置在待办事项列表对象中的位置并删除之前的位置。
但是，如果将项目拖到容器外，dom 仍然会更新，而拖放事件永远不会触发，因此 todo 对象永远不会更新。
我尝试在主体和容器上使用鼠标移动，但使用拖动 API 后似乎鼠标移动无法正常工作。
我也尝试过使用 Dragleave，但即使我位于容器内并将鼠标悬停在其子元素上，此事件也会触发。
我也只是尝试只使用javascript，并不断更新dragover 上的todo 对象。这在 Firefox 中完美运行，但在 Chrome 中滞后太多。
解决了。我使用 DragEnd 侦听器来检查客户端 x 和 y 是否在容器内，使用
getBoundingClientRect()如果客户端在容器之外，我使用todo对象找到div的原始位置并将其插入回原始位置。