html5——拖拽

基本情况

在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。

拖拽元素

页面中设置了draggable="true"属性的元素

目标元素

任意元素都能成为目标元素

事件监听

//拖拽元素
ondrag         //应用于拖拽元素，整个拖拽过程都会调用
ondragstart    //应用于拖拽元素，当拖拽开始时调用
ondragleave    //应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend      //应用于拖拽元素，当拖拽结束时调用

//目标元素
ondragenter    //应用于目标元素，当拖拽元素进入时调用
ondragover     //应用于目标元素，当停留在目标元素上时调用
ondrop         //应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave    //应用于目标元素，当鼠标离开目标元素时调用

默认事件

ondragover    //默认不会让其他盒子放置在盒子内,e.preventDefault()可以组织默认事件

拖拽案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 400px;
            height: 400px;
            background-color: greenyellow;
        }

        .box2 {
            margin: 0px auto;
        }

        ul {
            width: 100%;
            height: 100%;
            list-style: none;
        }

        li {
            float: left;
            width: 100px;
            height: 100px;
            background-color: #cccccc;
            border-radius: 50px;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
<div class="box1">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<div class="box2">
    <ul>
    </ul>
</div>
<script>
    var liArr = document.querySelectorAll(".box1 ul li");
    var box2 = document.querySelector(".box2");
    var ul = document.querySelector(".box2 ul");
    var currLi = null;
    for (var i = 0; i < liArr.length; i++) {
        liArr[i].draggable = true;
        liArr[i].ondragstart = function (ev) {
            currLi = this;
        }
    }
    ul.ondragover = function (e) {
        e.preventDefault();
    }
    ul.ondrop = function (ev) {
        ul.appendChild(currLi);
    }
</script>
</body>
</html>