- 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
- draggable 为了使元素可拖动，把 draggable 属性设置为 true。
- ondragover 事件规定在何处放置被拖动的数据。
- ondrop 当放置被拖数据时，会发生 drop 事件。
- ondragstart 属性调用了一个函数它规定了被拖动的数据。
1 <body>
2 <div id="box" class="box" ondrop="drop(event)" ondragover="over(event)"></div>
3 <img src="images/落日余晖.jpg" draggable="true" ondragstart="start(event)" id="img1">
4 </body>
5 <script>
6 // 1.获取元素
7 var oBox = document.getElementById('box');
8 // 定义方法
9 // 开始拖拽
10 function start(event) {
11 event.dataTransfer.setData('a', event.target.id);
12 }
13 // 准备放下
14 function drop(event) {
15 event.preventDefault();
16 var data = event.dataTransfer.getData('a');
17 oBox.appendChild(document.getElementById(data));
18 }
19 // 也放下
20 function over(event) {
21 event.preventDefault();
22 }
23 </script>
