H5拖拽

最新推荐文章于 2023-09-12 10:26:10 发布

木_艮

最新推荐文章于 2023-09-12 10:26:10 发布

阅读量434

点赞数

分类专栏： javascript 文章标签：拖拽

本文链接：https://blog.csdn.net/weixin_39703839/article/details/84874404

版权

javascript 专栏收录该内容

10 篇文章 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>
    <!-- 1.设置元素可拖拽属性 draggable="true" 2.拖拽元素 dragstart:开始，drag:移动，dragend:结束 3.目标元素 dragenter:进入，dragleave:离开，dragover:停留，drop:放下 4.存储传递数据 dataTransfer-->
    <!-- 目标元素 -->
    <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>

木_艮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5拖拽

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;H5拖放元素&lt;/title&gt; &lt;style&gt; /*目标元素*/ .goal_bo
复制链接

扫一扫