html5的拖拽api

概要

首先拖拽分两种:

  • 网页资源拖拽
  • 本地资源拖拽

然后拖拽实现需要:

  • 拖动放的设定
  • 释放方的设定
    知道这两点就好弄了。

拖动元素设定

对于网页元素,设定为可拖拽如下:

<li draggable="true">drag li1</li>

拖动放的设定

元素有拖动事件可以设置(对于网页元素而言,本地的自然无法设定):

  • dragstart:要被拖拽的元素开始拖拽时触发,这个事件对象是被拖拽元素

  • dragend:在drop之后触发,就是拖拽完毕时触发,这个事件对象是被拖拽元素

    绑定数据

    如果我们想在拖动的对象中绑定一些数据,那么就可以在这些事件中调用一下方法设定(还有其余方法可查文档)

    • dataTransfer.setData(format, data):为元素添加指定数据
    • dataTransfer.setDragImage(element, x, y):制定拖拽元素时跟随鼠标移动的图片,x、y分别是相对于鼠标的坐标
    • dataTransfer.addElement(element):添加一起跟随拖拽的元素,如果你想让某个元素跟随被拖拽元素一同被拖拽,则使用

释放方的设定

  • dragenter:拖拽元素进入目标元素时触发,这个事件对象是目标元素
  • dragover:拖拽某元素在目标元素上移动时触发,这个事件对象是目标元素
  • dragleave:拖拽某元素离开目标元素时触发,这个事件对象是目标元素
  • ondrop释放函数

此时需要注意的是,浏览器有默认对拖拽资源的操作,如新建一页打开文件或查找当前拖拽元素,对此需在释放方的ondragover和ondrop中用e.preventDefault()取消默认行为

数据操作

  • dataTransfer.types:返回在dragstart事件出发时为元素存储数据的格式,如果是外部文件的拖拽,则返回”files”
  • dataTransfer.clearData ( [ format ] ):删除指定格式的数据,如果未指定格式,则删除当前
  • dataTransfer.getData(format):返回指定数据,如果数据不存在,则返回空字符串
  • dataTransfer.files:如果是拖拽文件,则返回正在拖拽的文件列表FileList
  • dataTransfer.setDragImage(element, x, y):制定拖拽元素时跟随鼠标移动的图片,x、y分别是相对于鼠标的坐标

然后利用这些api就可以组合出一些拖拽读取的效果,如图片拖拽预览

附: 代码实例戳进来 | 更详细的介绍

如有疑问,请留言或邮件newbvirgil@gmail.com
本文链接 : http://blog.newbmiao.com/2015/02/22/html5-drag-api.html