HTML5_拖放

1、 拖放事件

拖动某元素,发生以下事件

  1. dragstart
  2. drag
  3. dragend

元素被当道一个有效的目标位置时,会依次发生

  1. dragenter
  2. dragover
  3. dragleave / drop

2、自定义放置目标

把一个任何元素变成有效的放置目标

1
2
3
4
5
6
7
8
var droptarget=document.getElementById("droptarget");
EventUtil.addHandler(droptarget ,"dragover",function(event){
EventUtil.preventDefault(event);
});

EventUtil.addHandler(droptarget ,"dragenter",function(event){
EventUtil.preventDefault(event);
});

由于在Firefox中,放置事件的默认行为是打开被放到放置目标的URL,如果是拖放的是一个文本,则会导致无效URL错误,所以为了保证正常,要取消drop事件的默认行为。

1
2
3
EventUtil.addHandler(droptarget ,"drop",function(event){
EventUtil.preventDefault(event);
});

3、dataTransfer对象

只有简单的拖放而没有数据变化然并卵,所以在拖放事件的事件处理程序中需要访问dataTransfer对象。
1、dataTransfer的方法
1)setData()
2)getData()

1
2
3
4
5
6
7
//设置和接收文本数据
event.dataTransfer.setData("text","some text"); //第一参数是getData的唯一一个参数
var text=event.dataTransfer.getData("text");

//设置和接收URL
event.dataTransfer.setData("url","http://www.wrox.com");
var url=event.dataTransfer.getData("URL");

在拖动文本是,调用setData()方法,保存在dataTransfer中,在放到目标位置时,通过getData()获取。

为保证firefox的兼容性,最好使用以下方法getData()

1
2
3
var dataTransfer=event.dataTransfer;
var url=dataTransfer.getData("url")||dataTransfer.getData("text/uri-list");
var text=dataTransfer.getData("Text");//Text大写

4、dataTransfer属性

通过dataTransfer的dropEffect和effectAllowed属性,可以确定被拖动的元素以及作为放置目标的元素能够接收什么操作。

dropEffect可以有以下取值

  1. none
  2. move
  3. copy
  4. link,放置目标会打开拖动的元素

dropEffect需要与effectAllowed属性配合才有用,可以有以下取值

  1. uninitialized,没有设置任何放置行为
  2. none
  3. copy
  4. link
  5. move
  6. copyLink
  7. copyMove
  8. linkMove
  9. all

必须在ondragstart中设置effectAllowed属性

5、可拖动

1
<div draggable="true">..<div>

【栗子】

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5拖放1</title>
<style type="text/css">
#div1,#div2 {width:488px;height:250px;padding:10px;border:1px solid #aaaaaa;margin-bottom: 50px}
</style>

<script type="text/javascript">
function drop(event){
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
function drag(event){
event.dataTransfer.setData("Text",event.target.id);
}
function allowDrop(event){
event.preventDefault();
}
</script>

</head>
<body>

<p>请把图片拖放到矩形中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="drag1.jpg" draggable="true" ondragstart="drag(event)" width="336" height="200">
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>

[效果如下]

tuofang1.png