html5拖拽

最新推荐文章于 2024-06-06 15:07:55 发布

xiaoshengjinbu

最新推荐文章于 2024-06-06 15:07:55 发布

阅读量102

点赞数

文章标签： js javascript vue css java

本文链接：https://blog.csdn.net/xiaoshengjinbu/article/details/124263964

版权

本文介绍了如何使用HTML和JavaScript实现一个简单的拖拽功能，用户可以将页面上的按钮拖动到指定容器中，通过dragstart、drag、dragend等事件处理程序管理拖拽过程。重点在于数据传输和目标容器的事件监听。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .list {
            width: 1000px;
            height: 300px;
            background: #aaaa7f;
        }

        .content {
            margin-top: 10px;
            width: 1000px;
            height: 300px;
            background: #ffaaff;
        }
    </style>
</head>

<body>
    <!-- 待拖拽列表 -->
    <div class="list">
        <!-- draggable="true" 让目标可以拖拽 -->
        <button id="btn" type="button" draggable="true">按钮</button>
    </div>

    <!-- 目标容器 -->
    <div id="content" class="content">

    </div>

    <script type="text/javascript">
        let btn = document.getElementById("btn");

        let content = document.getElementById("content");

        // ============= 以下是被拖拽目标的事件 =============
        // 目标开始拖拽事件
        btn.ondragstart = function (e) {
            console.log("目标开始拖拽", e);

            // e.dataTransfer是H5实现的一个可以在拖拽与被拖拽组件之间的“存储器”，实现组件间的数据传输
            e.dataTransfer.setData("id", e.target.id)
        }

        // 目标开始拖拽中的事件
        btn.ondrag = function (e) {
            // console.log("目标拖拽的过程中",e);
        }

        // 目标拖拽结束的事件
        btn.ondragend = function (e) {
            console.log("目标拖拽结束", e)
        }

        // ============= 以下是拖拽到容器区域的事件 ============
        content.ondragenter = function (e) {
            console.log("检测到目标进入容器", e);
        }

        content.ondragover = function (e) {
            // console.log("目标在容器上移动！",e);

            // 阻止默认事件，否则ondrop会失效
            e.preventDefault();
        }

        // 目标离开容器的事件
        content.ondragleave = function (e) {
            console.log("拖目标离开容器", e);
        }

        // 目标在容器内被释放的事件
        content.ondrop = function (e) {

            console.log("目标在容器区域释放", e.dataTransfer.getData("id"));

            // cloneNode(true)为深克隆节点，创建一个新的节点放到容器里面，这样才不会影响源节点
            let node = document.getElementById(e.dataTransfer.getData("id")).cloneNode(true);

            // 做一些标识，表示这个这个确实生成的
            node.setAttribute("id", "newBtn");
            node.innerText = "新按钮";

            // 这是释放之后对应的容器的信息，我们总要拿到一个容器放目标组件
            let targetContent = document.getElementById(e.target.id);

            targetContent.appendChild(node)

        }
    </script>
</body>

</html>

xiaoshengjinbu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html5拖拽

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .list { width: 1000px; ...
复制链接

扫一扫