HTML5拖拽拖放

效果图

设置节点可拖拽

<div draggable="false"></div>

<div draggable="true"></div>

了解拖放事件

写代码

<div draggable = "true"  id = "one">...</div>
<div draggable = "true"  id = "two">...</div>
<div draggable = "true"  id = "three">...</div>

<script>
    var one = document.getElementById("one");
    var two = document.getElementById("two");
    var three = document.getElementById("three");
    var eDrag;

    one.ondragover = function(e) {
        e.preventDefault();
    }
    two.ondragover = function(e) {
        e.preventDefault();
    }
    three.ondragover = function(e) {
        e.preventDefault();
    }   
    one.ondrag = function(e) {
        eDrag = e.target.id;   
    }
    two.ondrag = function(e) {
        eDrag = e.target.id;   
    }
    three.ondrag = function(e) {
        eDrag = e.target.id;   
    }
    one.ondrop = function(e) {
        if(eDrag) {
            e.target.parentNode.appendChild(document.getElementById(eDrag));
        }
    }
    two.ondrop = function(e) {
        if(eDrag) {
            e.target.parentNode.appendChild(document.getElementById(eDrag));
        }
    }
    three.ondrop = function(e) {
        if(eDrag) {
            e.target.parentNode.appendChild(document.getElementById(eDrag));
        }
    }
</script>

HTML5拖拽拖放

原文：https://www.cnblogs.com/fyjreact/p/11609774.html