HTML5 拖放

 

  • 拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
  • 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>

 

posted @ 2020-08-19 08:42  帅气巴巴  阅读(118)  评论(0编辑  收藏  举报