JS拖拽图片简单例子

Posted on Edited on

Reference: http://w3schools.bootcss.com/jsref/dom_obj_event.html

在H5中所有的元素都是可以被拖拽的, 通过给元素添加draggable="true"属性.

相关的地方:

  1. ondragover 事件发生在: 元素拖拽到拖放的目标元素之上时.(事件处理程序多次调用)
  2. ondragstart 事件发生在: 元素开始拖拽之时(事件处理程序1次调用)
  3. ondrop 事件发生在: 被拖拽的元素完成拖放到目标元素盒子区域这一动作.(事件处理程序1次调用)
  4. 事件的默认行为, 比如说在复选框上点击按钮会发生选中或取消选中事件. 这里需要在ondragover事件里阻止浏览器默认打开的行为.
  5. dataTransfer对象. 在进行拖放操作时，进行数据的存储, 这个对象也保存了拖拽元素的数据.
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>JS拖拽图片简单例子</title>

	<style type="text/css">
		.drop-target {
			border: 1px solid black;
			width: 300px;
			height: 300px;
		}
		img#img {
			width: 200px;
			height: 200px;
		}
	</style>

	<script type="text/Javascript">
		function allowDrop(e) {
			e.preventDefault();
		}
		function dragStart(event) {
			var dataTransfer = event.dataTransfer;
			dataTransfer.setData("id", event.target.id);
		}

		function drop(event) {
			var dataTransfer = event.dataTransfer;
			var imgId = dataTransfer.getData("id");
			var img = document.getElementById(imgId);
			
			var div = event.target;
			div.appendChild(img);
		}

	</script>
</head>
<body>

<div class="drop-target" ondragover="allowDrop(event)" ondrop="drop(event)">
请将图片拖放到这里来.
</div>

<img id="img" ondragstart="dragStart(event)" src="https://ooo.0o0.ooo/2017/08/20/599865a851d49.png" draggable="true">
</body>
</html>

在ondragstart那里获取图片的id属性值, 然后在drop方法里获取属性值获取图片对象, 接着添加到div里即可. 在ondragover事件里做处理操作, 让div取消默认行为, 接受图片的放入.

另外, event对象的两次target分别是被拽放对象img和拖放接受对象div.