H5 元素拖放

作者: 壬万er | 来源:发表于2017-06-23 10:23 被阅读0次

HTML5拖放
H5 元素拖放
前端面试05：说一下 HTML5 drag api
011 HTML5 拖放事件 01
H5 拖放事件详解
HTML5
学习笔记-拖放/地理定位-2017.2.10
H5拖放异步文件上传之二——上传进度监听
原生的 HTML 5 拖拽与JavaScript File AP
js实现拖拽事件

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

先放图一张：

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>