web►html5

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 本文链接 : https://newbmiao.github.io/2015/02/22/html5-drag-api.html