HTML5拖放 API 学习笔记

参考资料

http://www.w3school.com.cn/html5/html_5_draganddrop.asp

简单拖放规则

1. 对需要进行拖放的元素，将draggable 属性值置为true,允许元素可拖放；
2. 给元素绑定开始拖动事件（ondragstart），规定当元素被拖动时，会发生什么;
3. 给元素绑定拖动经过事件(ondragover),规定在何处放置被拖动的数据.默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，必须阻止对元素的默认处理方式。

event.preventDefault()

4. 进行放置操作，即是给元素绑定ondrop事件，规定放置被拖动元素时，需要进行的操作；

案例

HTML

CSS

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

ul,
ul li {
    padding: 0;
    margin: 0;
    list-style: none;
}

#drag li {
    display: inline-block;
    margin: 5px;
    width: 100px;
    height: 100px;
    text-align: center;
    vertical-align: middle;
    background: lightcoral;
}

#drag li.drag {
    background: lightblue;
}

JS

var oDrag = document.getElementById("drag");
        // 元素拖动时，执行的操作
    oDrag.ondragstart = function(e) {
            var target = e.target;
            target.classList.add('drag');
            target.innerHTML = 'dragged';
        }
        // 放到何处
    oDrag.ondragover = function(e) {
        // 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方
        e.preventDefault();
    }
    oDrag.ondrop = function(e) {
        var el = e.target;
        el.classList.remove('drag')
        el.innerHTML = "droped";
        if (e.target.nodeName === "LI") {
            e.target.parentNode.insertBefore(el, e.target); //将源对象元素插入到目标元素前面
        }
    }

结果

9B14E928-A61A-4A01-B03E-0BFDC2D0858A.GIF

在不同区域内拖动

实现规则

同简单规则；

代码

HTML

CSS

ul,
ul li {
    list-style: none;
}

.drag {
    display: inline-block;
    width: 500px;
    height: 300px;
    border: 1px solid lightblue;
}

.drag li {
    display: inline-block;
    width: 50px;
    height: 50px;
    top: 30px;
    margin: 5px;
    background: lightblue;
}

.drop {
    display: inline-block;
    width: 500px;
    height: 300px;
    border: 1px solid lightcoral;
}

.drop li {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: lightcoral;
    margin: 5px;
}

JS

window.onload = function() {
    var oDrag = getId('drag');
    var aDrag = getEle("li", oDrag);
    var oDrop = getId("drop"),
        aDrop = getEle("li", oDrop) || [];
    for (var i = 0; i < aDrag.length; i++) {
        var item = aDrag[i];
        item.setAttribute('draggable', true);
        item.ondragstart = function(e) {
            e.dataTransfer.setData('dragId', this.id)
        }
        oDrop.ondragover = function(e) {
            e.preventDefault();
        };

        oDrop.ondrop = function(e) {
            var id = e.dataTransfer.getData("dragId");
            var ele = getId(id);
            var target = document.createElement('li')
            oDrop.appendChild(target);
            target.setAttribute('id', 'drag_' + id)
            ele.parentNode.removeChild(ele)
            target.setAttribute("draggable", true);
            aDrop = getEle('li', oDrop);
        };
    }

    for (var j = 0; j < aDrop.length; j++) {
        var item1 = aDrop[j];
        item1.ondragstart = function(e) {
            e.dataTransfer.setData("dropId", this.id);
        };
        oDrag.ondragover = function(e) {
            e.preventDefault();
        };
        oDrag.ondrop = function(e) {
            var id = e.dataTransfer.getData("dropId");
            var ele = getId(id);
            var target = document.createElement("li");
            oDrag.appendChild(target);
            target.setAttribute("id", "drop_" + id);
            ele.parentNode.removeChild(ele);
            target.setAttribute("draggable", true);
            aDrag = getEle("li", oDrag);
        };
    }

};
/**
 * 根据id获取DOM元素
 * 
 * @param {String} id 元素的id
 * @returns 
 */
function getId(id) {
    return document.getElementById(id);
}
/**
 * 根据样标签获取DOM元素
 * 
 * @param {String} tagName 样式名称
 * @param {Object} parent 父级元素
 */
function getEle(tagName, parent) {
    return parent.getElementsByTagName(tagName);
}

结果

59D30836-0437-45FC-A7CF-27B0A887A615.GIF