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))
}

猜你喜欢

转载自blog.csdn.net/m0_37911706/article/details/127121060
今日推荐