拖拽api相关问题

在父级元素内有多个子元素时,拖动子元素1,经过子元素2,3时会触发dragleave enter事件 当只想监听leave父元素时会因上述情况导致@dragleave事件触发时机不正确,解决方案

let currentOverEl = null   //当前鼠标指针活动的父级元素
   function  handleDragEnter(e, day) {  //  父级dragenter回调
      if (!currentOverEl) {
        currentOverEl = e.currentTarget
        currentOverEl.classList.add('hover')
      }
      if (!currentOverEl.contains(e.target) || e.target !== currentOverEl) {//进入别的父级元素之后相当于触发leave事件
        currentOverEl.classList.remove('hover')
        currentOverEl = e.currentTarget
        currentOverEl.classList.add('hover')
      }
    }

function handleDrop(day, event) { //  父级drop回调 也相当于手动触发leave
      currentOverEl.classList.remove('hover')
      currentOverEl = null
}

你可能感兴趣的:(拖拽api相关问题)