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>