HTML5实现拖放

大家好，欢迎来到IT知识分享网。

一、HTML5 拖放（Drag 和 Drop）

      拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

二、实现过程

    1、设置元素为可拖放：为了使元素可拖动，把 draggable 属性设置为 true ，例如：

<img draggable="true">

    2、拖动什么 – ondragstart 和 setData()：规定当元素被拖动时，会发生什么。

                  ondragstart事件调用了一个函数，它规定了被拖动的数据

document.ondragstart = function(e){ e.dataTransfer.setData('text',e.target.id) //存储数据 e.target.style.opacity = 0.5 console.log(e.target.id) }

      dataTransfer：实现数据的存储和获取 ​ setData(format,data) 存储数据 ​

              format参数：数据类型(text/html、text/url-list) ​

              data参数：数据。一般是字符串

      3、放到何处 – ondragover

        ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法（即：浏览器会默认阻止ondrop事件，所以必须在ondragover事件中阻止默认行为）

document.ondragover = function(e){ e.preventDefault() }

      4、进行放置 – ondrop：当放置被拖数据时，会触发 drop 事件。

• 通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
• 被拖数据是被拖元素的 id (“drag1”)
• 把被拖元素追加到放置元素（目标元素）中

document.ondrop = function(e){ console.log(e) //通过e.dataTransfer.setData存储的数据只能在ondrop事件中获取 var data = e.dataTransfer.getData('text') e.target.appendChild(document.getElementById(data)) }

 三、拖拽元素支持的事件

      1、ondrag：应用于拖拽元素，在整个拖拽过程中都会调用

      2、ondragstart：应用于拖拽元素，当拖拽开始时调用

      3、ondragleave：应用于拖拽元素，当鼠标离开拖拽元素时调用

      4、ondragend：应用于拖拽元素，当拖拽结束时调用

四、目标元素支持的事件

     1、ondragenter：应用于目标元素，当拖拽元素进入时调用

     2、ondragover：应用于目标元素，当停留在目标元素上方时调用

     3、ondrop：应用于目标元素，当在目标元素上方松开鼠标时调用

     4、ondragleave：应用于目标元素，当鼠标离开目标元素时调用

五、示例

     1、html页面

<!-- 在H5中，如果想拖拽元素就必须为元素添加draggable="true"。图片和超链接默认就可以拖拽 --> <div id="div1" class="div1"> <p id="pe3" class="p3" draggable="true">3</p> <p id="pe2" class="p2" draggable="true">2</p> <p id="pe5" class="p5" draggable="true">5</p> <p id="pe1" class="p1" draggable="true">1</p> <p id="pe6" class="p6" draggable="true">6</p> <p id="pe4" class="p4" draggable="true">4</p> <a href="http://www.baidu.com" id="a1">百度一下</a> </div> <div id="div2" class="div2"></div> <div id="div3" class="div3"></div>

       2、CSS代码

*{ padding: 0; margin: 0; } .div1,.div2,.div3{ margin: 0 20px; float: left; width: 200px; height: 220px; border: 1px solid #ccc; } div{ display: flex; flex-direction: column; align-items: center; } p{ display: flex; flex-direction: column; align-items: center; } .p1{ width: 50px; background-color: pink; margin: 5px 0; } .p2{ width: 80px; background-color: burlywood; margin: 5px 0; } .p3{ width: 110px; background-color: rgb(133, 88, 29); margin: 5px 0; } .p4{ width: 140px; background-color: rgb(172, 39, 48); margin: 5px 0; } .p5{ width: 170px; background-color: rgb(17, 182, 31); margin: 5px 0; } .p6{ width: 200px; background-color: rgb(90, 33, 155); margin: 5px 0; }

            3、javascript代码

document.ondragstart = function(e){
            /*
               dataTransfer：实现数据的存储和获取
               setData(format,data) 存储数据
                   format参数：数据类型(text/html、text/url-list)
                   data参数：数据。一般是字符串
            */
            e.dataTransfer.setData('text',e.target.id) //存储数据
            e.target.style.opacity = 0.5
            console.log(e.target.id)
}

document.ondragend = function(e){
     e.target.style.opacity = 1
}

/*
   浏览器会默认阻止ondrop事件，所以必须在ondragover事件中阻止默认行为 
*/
document.ondragover = function(e){
   e.preventDefault()
}

document.ondrop = function(e){
   console.log(e)
   //通过e.dataTransfer.setData存储的数据只能在ondrop事件中获取
   var data = e.dataTransfer.getData('text')
   e.target.appendChild(document.getElementById(data))
}