Draggable 拖动元素

妖狐艹你老母 2022-12-04 08:37 259阅读 0赞 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <!-- 1、首先，为了使元素可拖动，把 draggable 属性设置为 true ： -->
  10.     <!-- 2、拖动什么 拖动什么 - ondragstart 和 setData() -->
  11.     <!-- 2.1、ondragstart事件 (用户开始拖动元素时触发)  drag(event)，它规定了被拖动的数据。 -->
  12.     <img id="drag1" src="蜡笔小新.jpg" draggable="true" ondragstart="drag(event)" width="200" height="200" /><br>
  13.     <!-- 3、放到何处 - ondragover -->
  14.     <!-- 3.1、ondragover 事件规定在何处放置被拖动的数据 -->
  15.     <!-- 3.2、默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法： -->
  16.     <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="width: 200px; height: 200px; border: 1px solid red;"></div>
  17.     <!-- 4、进行放置 - ondrop -->
  18.     <!-- 4.1、当放置被拖数据时，会发生 drop 事件。ondrop 属性调用了一个函数，drop(event)： -->
  19.     <script>
  20.         function drag(ev) { 
  21.             ev.dataTransfer.setData("Text",ev.target.id); //dataTransfer.setData() 方法设置被拖数据的数据类型和值：
  22.         }
  23.         function allowDrop(ev) { 
  24.             ev.preventDefault(); 
  25.         }
  26.         function drop(ev) { 
  27.             ev.preventDefault();
  28.             var data=ev.dataTransfer.getData("Text");
  29.             ev.target.appendChild(document.getElementById(data));
  30.         }       
  31.     </script>
  32. </body>
  33. </html>

发表评论

表情：
评论列表 （有 0 条评论，259人围观）

还没有评论，来说两句吧...

相关阅读