H5拖拽

川长思鸟来 2022-04-08 08:52 366阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>H5拖放元素</title>
        <style>
            /*目标元素*/
            .goal_box{
                width:300px;
                height:150px;
                margin:30px;
                border:1px solid #ff0000;
            }
            /*拖拽元素*/
            .drag_node{
                width:100px;
                padding:10px;
                margin:10px;
                text-align: center;
                cursor: move;
                background-color: #eee;
            }
        </style>
    </head>
    <body>
        
        
        <div class="goal_box"> </div>
        <div class="goal_box"> </div>
        
        <div id="drag_node" class="drag_node" draggable="true">拖放1</div>
        <div id="drag_node2" class="drag_node" draggable="true">拖放2</div>
        <script type="text/javascript">
        window.onload = function() {
            nodeDrag(); //拖拽函数
        }
    
        function nodeDrag() {
            var goalBox = document.getElementsByClassName('goal_box'); //将要拖拽放入的目标节点
            var dragNode = document.getElementsByClassName('drag_node'); //拖放的节点
    
            for (var k = 0; k < dragNode.length; k++) {
                // 拖拽元素 
                dragNode[k].ondragstart = function() {
                    event.dataTransfer.setData("Text", event.target.id); // 拖拽开始存储数据
                }
            }
    
            for (var i = 0; i < goalBox.length; i++) {
                // 目标元素
                goalBox[i].ondrop = function() {
                    // 拖拽元素在目标中放下 
                    event.preventDefault(); //阻止浏览器默认行为
                    var data = event.dataTransfer.getData("Text"); //取出数据
                    event.target.appendChild(document.getElementById(data)); //将拖拽元素添加到目标节点中
                }
    
                goalBox[i].ondragover = function() {
                    // 拖拽元素在目标中停留时阻止浏览器默认行为
                    event.preventDefault();
                }
            }
        }
        </script>
    </body>
    </html>