美文网首页
h5的拖动drag&drop

h5的拖动drag&drop

作者: A梦醒听轻雨 | 来源:发表于2018-05-16 10:41 被阅读10次

DataTransfer对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer。

draggable属性:就是标签元素要设置draggable=true,否则不会有效果,例如:<div title="拖拽我" draggable="true">列表1</div>

ondragstart事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上

ondragenter事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上

ondragover事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上

ondrop事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上

ondragend事件:当拖拽完成后触发的事件,此事件作用在被拖曳元素上

Event.preventDefault()方法:阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。

Event.effectAllowed属性:就是拖拽的效果

event.stopPropagation 阻止发生冒泡事件

相关文章

  • h5的拖动drag&drop

    DataTransfer对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer。 dragg...

  • HTML5新增属性

    *HTML Geolocation 浏览器地理位置*HTML Drag and Drop 拖动*HTML Loca...

  • selenium drag_and_drop不支持HTML5解决

    背景项目中需要拖拽操作,使用drag and drop,经测试并不生效,没有实现拖动,但是robotframewo...

  • MailEditor-Widget拖拽组件(基于Vue2)

    先上动图,看看效果。 maileditor的最重要的组件之一就是拖动(Drag and Drop) ,因为mail...

  • h5、vue实现拖拽

    H5中拖拽属性:draggable: auto | true | false 拖动事件: dragstart 在元...

  • 学习笔记-拖放/地理定位-2017.2.10

    一、HTML5 拖放(Drag 和 Drop) 1、设置元素为可拖放 首先,为了使元素可拖动,把 draggabl...

  • 拖动拖拽插件

    分享一个封装好的拖动插件,使用方式很简单,入参传入需要拖动的dom即可(支持pc端,h5端) 例子:Drag(do...

  • vue-picture-drag

    一个用于在图片上拖动的组件 git git地址 安装 记录 drag & drop 开始时采用HTML5的drag...

  • HTML 5 拖放实例

    拖放(Drag 和 drop)是 HTML5 标准的组成部分。 首先来看个实例 1 Who,让谁可以拖动。为了使元...

  • H5C3的新特性

    H5新特性 拖拽释放(Drap and drop) API ondrop 拖放是一种常见的特性,即抓取对象以后拖到...

网友评论

      本文标题:h5的拖动drag&drop

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