html5

HTML5_拖放

Posted on 2016-07-28 |    

拖放事件

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

  1. dragstart
  2. drag
  3. dragend

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

  1. dragenter
  2. dragover
  3. dragleave / drop

自定义放置目标

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

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);
});

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大写

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属性

可拖动

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>

[效果如下]

FEATURED TAGS
html5