js拖放功能的实现

拖放是网页中一种很常见的交互手段。下面简单介绍使用js实现拖放功能的方法。

拖放流程

拖放元素的流程如下:

选中元素—>拖动元素—>释放元素

下面介绍上述拖放元素流程的具体实现方法。

选中元素

在HTML5标准中,为了使元素可拖动,把draggable属性设置为true。文本、图片和链接是默认可以拖放的,它们的draggable属性自动被设置成了true。图片和链接按住鼠标左键选中,就可以拖放。文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true,按住鼠标左键也可以直接拖放。

draggable属性:设置元素是否可拖动。语法:

1
<element draggable="true | false | auto" >

其中:

  • true: 可以拖动
  • false: 禁止拖动
  • auto: 跟随浏览器定义是否可以拖动

拖动元素

每一个可拖动的元素,在拖动过程中,都会经历三个过程,拖动开始–>拖动过程中–> 拖动结束。

针对对象 事件名称 说明
被拖动的元素 dragstart 在元素开始被拖动时候触发
drag 在元素被拖动时反复触发
dragend 在拖动操作完成时触发
目的地对象 dragenter 当被拖动元素进入目的地元素所占据的屏幕空间时触发
dragover 当被拖动元素在目的地元素内时触发
dragleave 当被拖动元素没有放下就离开目的地元素时触发

释放

到达目的地之后,释放元素事件

针对对象 事件名称 说明
目的地对象 drop 当被拖动元素在目的地元素里放下时触发,一般需要取消浏览器的默认行为。

DataTransfer对象

与拖放操作所触发的事件同时派发的对象是DragEvent,它派生于MouseEvent,具有Event与MouseEvent对象的所有功能,并增加了dataTransfer属性。该属性用于保存拖放的数据和交互信息,返回DataTransfer对象。

DataTransfer对象常用的属性和方法如下:

属性 说明
types 只读属性。它返回一个我们在dragstart事件中设置的拖动数据格式的数组。 格式顺序与拖动操作中包含的数据顺序相同。IE10+、Edge、safari3.1、Firefox3.5+ 和Chrome4以上支持该属性
files 返回拖动操作中的文件列表。包含一个在数据传输上所有可用的本地文件列表。如果拖动操作不涉及拖动文件,此属性是一个空列表。
dropEffect 获取当前选定的拖放操作的类型或将操作设置为新类型。它应该始终设置成effectAllowed的可能值之一【none、move、copy、link】。dragover事件处理程序中针对放置目标来设置dropEffect。
effectAllowed 指定拖放操作所允许的效果。必须是其中之一【 none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized】默认为uninitialized 表示允许所有的效果。ondragstart处理程序中设置effectAllowed属性
方法 说明
void setData(format, data) 将拖动操作的拖动数据设置为指定的数据和类型。format可以是MIME类型
String getData(format) 返回指定格式的数据,format与setData()中一致
void clearData([format]) 删除给定类型的拖动操作的数据。如果给定类型的数据不存在,此方法不执行任何操作。如果不给定参数,则删除所有类型的数据。
void setDragImage(img, xOffset, yOffset) 指定一副图像,当拖动发生时,显示在光标下方。大多数情况下不用设置,因为被拖动的节点被创建成默认图片。x,y参数分别指示图像的水平、垂直偏移量

浏览器文件拖拽示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
document.addEventListener("dragenter",function(e) {
e.preventDefault();
e.stopPropagation();
},false);

document.addEventListener("dragover",function(e) {
e.preventDefault();
e.stopPropagation();
},false);

document.addEventListener("dragleave",function(e) {
e.preventDefault();
e.stopPropagation();
},false);

document.addEventListener("drop",function(e) {
e.preventDefault();
e.stopPropagation();

var df = e.dataTransfer;
var dropFiles=[];

if (df.items !==undefined){
for(var i=0;i<df.items.length;i++){
var item= df.items[i];
if(item.kind==="file" && item.getAsEntry().isFile){
var file =item.getAsFile();
dropFiles.push(file);
}
}
}
},false);

参考链接

  1. js控制文件拖拽,获取拖拽内容。,by segmentfault.
  2. HTML5原生拖拽/拖放 Drag & Drop 详解,by weiqinl.
  3. 原生JS快速实现拖放(drag and drop)效果,by MudOnTire.