拖拽 H5 API

设置元素属性 draggable=true 即可让元素能够拖放

拖放源:被拖放的元素

拖放目标:被拖放的元素到达的目标元素

拖放源事件:

  • dragstart:拖放源开始被拖放时触发
  • drag:拖放源被拖放的过程中触发
  • dragend:拖放源在拖放结束时触发

拖放目标事件:

  • dragenter:拖放源进入元素边界时触发
  • dragleave:拖放源离开元素边界时触发
  • dragover:拖放源在元素内部时不断被触发
  • drop:拖放源被释放到元素内部时触发

dataTransfer是拖放事件对象中的一个属性,其中保存了跟拖放相关的信息,它的字符串属性dropEffect,可以设置鼠标在拖放目标中的样式,可设置的值为:

  • copy
  • move
  • link
  • none
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 拖放事件 H5的拖放事件提供了多个接口: 1、drag:当元素或者选中的文本被拖动时触发(每几百毫秒触发一次),应...
    用技术改变世界阅读 1,597评论 0赞 0
  • 1 网络状态 我们可以通过window.navigator.onLine来检测,用户当前的网络状况,返回一个布尔值...
    xlystar阅读 326评论 0赞 0
  • 一、拖拽API 设置对象可以拖动 事件 dragover有一个默认行为!!!那就是当dragover触发时,dro...
    小懒豆阅读 706评论 0赞 1
  • h5新特性总览 <a name="t1"></a><a target="_blank" name="t1" sty...
    A你叫阿钧阅读 786评论 0赞 0
  • 文件API FileList对象与file对象 FileList对象表示用户选择的文件列表。在HTML4中,fil...
    oWSQo阅读 2,230评论 1赞 2

友情链接更多精彩内容