console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖曳</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            float: left;
            margin:10px;
        }
        div:nth-child(2){
            border: 1px solid green;
        }
        div:nth-child(3){
            border: 1px solid blue;
        }
        p {
            height: 25px;
            background-color: pink;
            line-height: 25px;
            text-align:center
        }
    </style>
</head>
<body>
    <div id="div1">
        <p id="p1" draggable="true">拖曳内容1</p>
        <p id="p2" draggable="true">拖曳内容2</p>
        <p id="p3" draggable="true">拖曳内容3</p>
        <p id="p4" draggable="true">拖曳内容4</p>
    </div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
<script>
    //当拖曳开始触发时
    document.ondragstart = function(event){
        console.log('源对象开始被拖动');
        console.log(event.target.id);
        event.dataTransfer.setData('text/html',event.target.id);//传递id值
    };
    //作用于整个拖曳过程（不断地执行）
    document.ondrag = function(event){
        //console.log('源对象被拖动过程中');
    };
    //当拖拽结束时触发
    document.ondragend = function(event){
        console.log('源对象被拖动结束');
    };
    //当源对象进入目标元素时
    document.ondragenter = function(event){
        //console.log('目标对象被源对象拖动的进入');
        //console.log('event.target');
    };
    //当源对象悬停在目标元素上方时触发
    document.ondragover = function(event){
        //console.log('源对象悬停在目标元素上方时');
 
        return false;
    };
    //当源对象离开目标元素时
    document.ondragleave = function(){
        console.log('离开了');
    };
    //当源对象在目标元素上方释放鼠标时
    document.ondrop = function(event){
        console.log('上方释放')
        var id = event.dataTransfer.getData('text/html');
        event.target.appendChild(document.getElementById(id));
    };
</script>
</html>