实践

if (!this.$el.contains(event.relatedTarget)) 判断的作用是确定拖拽元素是否完全离开了目标区域及其子元素。这可以帮助避免在拖拽元素只是移动到目标元素的子元素上时不必要地触发 dragleave 事件。下面是详细解释：

作用

1. 避免不必要的 dragleave 触发:

   • 当拖拽元素移动到目标元素的子元素上时，如果不加 if (!this.$el.contains(event.relatedTarget)) 判断，dragleave 事件可能会被频繁触发。这是因为 relatedTarget 是指向拖拽元素离开的目标元素或其子元素。在这种情况下，目标元素本身可能仍然在拖拽元素的“视野”中，导致 dragleave 被触发不必要地。

2. 确保 dragleave 事件只在拖拽元素完全离开目标区域时触发:

   • event.relatedTarget 表示拖拽元素离开目标元素后，焦点可能进入的另一个元素。通过 this.$el.contains(event.relatedTarget) 来检查拖拽元素是否还在目标元素或其子元素中。如果 relatedTarget 在目标区域内，则拖拽元素还没有完全离开目标区域，不应触发 dragleave 事件。因此，当 relatedTarget 不在目标元素中时，才将 isDragOver 设置为 false。