HTML 拖放 - 蝴蝶教程

HTML5拖放

拖放是一个非常常见的功能。当你“抓住”一个物体并将其拖到另一个位置时。在HTML5中，拖放是标准的一部分：任何元素都可以拖动。

浏览器支持

Internet Explorer	Chrome	FireFox	Safari	Opera

9.0（包含）以上支持	4.0（包含）以上支持	3.5（包含）以上支持	6.0（包含）以上支持	12.0（包含）以上支持

下面的示例是一个简单的拖放示例：

<!DOCTYPE HTML>
                       <html>
                       <head>
                       <script>
                       function allowDrop(ev) {
                           ev.preventDefault();
                       }
   
                       function drag(ev) {
                           ev.dataTransfer.setData("text", ev.target.id);
                       }
   
                       function drop(ev) {
                           ev.preventDefault();
                           var data = ev.dataTransfer.getData("text");
                           ev.target.appendChild(document.getElementById(data));
                       }
                       </script>
                       </head>
                       <body>
   
                       <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   
                       <img id="drag1" src="/images/f3.jpg" draggable="true" ondragstart="drag(event)" width="250" height="300">
   
                       </body>
                       </html>

尝试一下

示例说明： 1，要使元素可拖动，请将该draggable属性设置为true：

<img draggable="true">

2，要拖动什么，ondragstart和setData()：指定拖动元素时应该发生的事情。在上面的示例中，该ondragstart属性调用一个函数drag(event)，该函数指定要拖动的数据。dataTransfer.setData()方法设置数据类型和拖动数据的值：

function drag(ev) {
                   ev.dataTransfer.setData("text", ev.target.id);
                   }

在这种情况下，数据类型是“text”，值是可拖动元素的id（“drag1”）。 3，要拖到哪里 - ondragover： ondragover事件指定可以删除拖动数据的位置。默认情况下，不能在其他元素中删除数据/元素。要允许删除，我们必须阻止元素的默认处理。这是通过调用event.preventDefault() ondragover事件的方法来完成的：

event.preventDefault()

4，删除拖动的数据时，会发生丢弃事件。在上面的例子中，ondrop属性调用一个函数drop(event)：

function drop(ev) {
                       ev.preventDefault();
                       var data = ev.dataTransfer.getData("text");
                       ev.target.appendChild(document.getElementById(data));
                   }

代码解释：

调用preventDefault()以防止浏览器默认处理数据
使用dataTransfer.getData()方法获取拖动的数据。此方法将返回在setData()方法中设置为相同类型的任何数据
拖动的数据是拖动元素的id（"drag1"）
将拖动的元素追加到drop元素中

来回拖放的示例

这是一个来回拖放的示例：

<!DOCTYPE HTML>
                       <html>
                       <head>
                       <style>
                       #div1, #div2 {
                           float: left;
                           width: 100px;
                           height: 35px;
                           margin: 10px;
                           padding: 10px;
                           border: 1px solid black;
                       }
                       </style>
                       <script>
                       function allowDrop(ev) {
                           ev.preventDefault();
                       }
   
                       function drag(ev) {
                           ev.dataTransfer.setData("text", ev.target.id);
                       }
   
                       function drop(ev) {
                           ev.preventDefault();
                           var data = ev.dataTransfer.getData("text");
                           ev.target.appendChild(document.getElementById(data));
                       }
                       </script>
                       </head>
                       <body>
   
                       <h2>拖放</h2>
                       <p>在两个div元素中来回拖放这张图片</p>
   
                       <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
                         <img src="/images/f2.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="250" height="300">
                       </div>
   
                       <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   
                       </body>
                       </html>

尝试一下