美文网首页
拖拽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相关问题

    在父级元素内有多个子元素时,拖动子元素1,经过子元素2,3时会触发dragleave enter事件 当只想监听l...

  • 拖拽相关问题

    上一篇简单地描述了拖拽效果的实现,下面修缮出现的各种用户体验不好的情况: 1.cursor: move -- 被拖...

  • HTML5 fileReader用法

    相关API 1.文件拖拽事件 ondragover -> 只要悬浮,一直触发 ondragenter -> 进入时...

  • h5-API

    拖拽API 属性 draggable 设置为 draggable=true 可以被拖拽 拖拽事件 ondragst...

  • H5新增API

    拖拽API 属性 draggable 设置为true 可以被拖拽 拖拽事件 ondragstart 开始被拖动...

  • HTML5新增API

    拖拽API 属性 draggable 设置为true 可以被拖拽 拖拽事件 ondragstart 开始被拖动...

  • 拖拽API

    实现拖拽效果 目前实现拖拽效果 HTML5拖拽 源元素事件例子 目标元素事件 从本地拖放图片到页面中 实现拖拽

  • 拖拽API

    OnDragListener 通过 startDrag() 来启动拖拽用 setOnDragListener() ...

  • Runtime相关API

    类相关API 属性相关API 成员变量相关API 方法相关API

  • html5实现拖拽效果

    在此之前,实现拖拽操作都是开发人员自定义逻辑实现的,但是HTML5提供了拖拽API ,使得拖拽操作的实现变得简单。...

网友评论

      本文标题:拖拽api相关问题

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