美文网首页
拖拽api相关问题

拖拽api相关问题

作者: 我再咸鱼一次 | 来源:发表于2019-08-06 22:46 被阅读0次

    在父级元素内有多个子元素时,拖动子元素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相关问题

          本文链接:https://www.haomeiwen.com/subject/ewbgdctx.html