HTML5实现拖放

一、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))
}复制