H5 元素拖放

weixin_34116110發表於2017-06-23
H5

今天分享一個元素拖放的案例，注意：這個是H5新增的；

先放圖一張：

4951956-dc21e3da24351ae0.gif
1.gif

程式碼：（一些API和細節都在程式碼註釋裡了）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:400px;
            height:100px;
            background: blue;
            margin-bottom:10px;
            display: flex;
        }
        p{
            width:200px;
            height:50px;
            margin:auto;
            display: flex;
            background: #fff;
            align-items:center;
            justify-content:center;
        }
    </style>
</head>
<body>
<div>
    <p draggable="true">可以拖動的文字</p>
</div>
<div></div>
<div></div>
<div></div>
<script>
    //首先實現拖動要用到的方法有 dragenter  dragover dragleave  drop
    var p = document.querySelector("p");
    /*開始拖動的時觸發。 只觸發一次  在被拖動的元素上觸發*/
    p.addEventListener("dragstart",function () {
//        console.log("p","dragstart..開始拖動")
    });
    /* 拖動的過程中觸發。 只要元素在拖動，會一直重複觸發   在被拖動的元素上觸發*/
    p.addEventListener("drag",function () {
//        console.log("p","drag...")
    });
    /*進入另外一個元素的區域時觸發.  是在目標元素上觸發*/
    document.addEventListener("dragenter",function (e) {
//        console.log(e.target,"dragenter...進入目標區域");
        var target = e.target;
        if(target.tagName.toLocaleLowerCase() == "div" ){
            target.style.backgroundColor = "red";
        }

    });
    /* 在潛在目標區域的上方的時候會重複觸發 */
    document.addEventListener("dragover",function (e) {
        e.preventDefault();

//        console.log(e.target,"dragover...進入目標區域")
    });
    /*從潛在目標元素上方離開的時候觸發*/
    document.addEventListener("dragleave",function (e) {
//        console.log(e.target,"dragleave...離開目標區域")
        if(e.target.tagName.toLocaleLowerCase() == "div" ){
            e.target.style.backgroundColor = "blue";
        }
    });
    /*在鬆開滑鼠拖放結束的時候觸發*/
    p.addEventListener("dragend",function () {
//        console.log("p","drag...end")
    });
    /*釋放拖動元素的時候觸發。  這個事件是在dropend事件觸發前觸發。*/
    document.addEventListener("drop",function (e) {
//        console.log(e.target,"drop...放下")
        if(e.target.tagName.toLocaleLowerCase() == "div"){
            p.parentNode.removeChild(p);
            e.target.appendChild(p);
            e.target.style.backgroundColor = "blue";
        }
    })

</script>
</body>
</html>

相關文章