站住，你懂html拖拽吗？

最新推荐文章于 2024-05-06 13:10:01 发布

无味1858

最新推荐文章于 2024-05-06 13:10:01 发布

阅读量219

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/wuwei121313/article/details/131918997

版权

一直都想学HTML的拖拽，可是每次打开别人的文章看到一半就头晕了（不知道你们会不会有这种症状，感觉要去医院看一下🤪），今天逼自己一把消化一下

整两个容器，一个目标放置元素container1、一个被拖拽元素container2，再整点样式

 <style>
        html,
        body {
            padding: 0px;
            margin: 0px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        #container1 {
            width: 600px;
            height: 300px;
            border: 1px solid red;
            margin-bottom: 30px;
        }
        
        #container2 {
            width: 50px;
            height: 50px;
            background-color: gray;
            cursor: pointer;
        }
  </style>
  <body>
    <!-- container1：目标放置元素 -->
    <div id="container1">1</div>
    <!-- 
        container2：被拖拽元素
        {
            draggable:true, 设置元素为可拖拽
            draggable:false, 设置元素不可拖拽
            draggable:auto, 使用浏览器默认行为
        }
     -->
    <div id="container2" draggable="true">2</div>
  </body>

效果如图：

2.在被拖拽元素container2上面设置draggable=true

<div id="container2" draggable="true">2</div>

draggable作用是规定元素是否可拖动，注意链接和图像默认是可以拖动的，并且他可以设置3种状态

值	作用
true	设置元素为可拖拽
false	设置元素不可拖拽
auto	使用浏览器默认行为

3.获取目标放置元素和被拖拽元素

    // 获取目标放置元素
    const container1 = document.querySelector("#container1");
    // 获取被拖拽元素
    const container2 = document.querySelector("#container2");

4.设置dragstart：当拖拽元素被拖拽时触发的事件

    //dragstart：当拖拽元素被拖拽时触发的事件
    container2.addEventListener("dragstart", (event) => {
      event.dataTransfer.setData("text", event.target.id);
    });

5.设置dragover：当拖拽元素在目标放置元素上移动的时候触发

    //dragover：当拖拽元素在目标放置元素上移动的时候触发
    container1.addEventListener("dragover", (event) => {
        event.preventDefault(); //阻止浏览器默认行为，例如阻止打开拖拽元素的链接或文件
    });

6.设置drop：当拖拽元素放到目标放置元素上释放时触发此事件

    //drop：当拖拽元素放到目标放置元素上释放时触发此事件
    container1.addEventListener("drop", (event) => {
        event.preventDefault(); //阻止浏览器默认行为，例如阻止打开拖拽元素的链接或文件
        const moveItem = event.dataTransfer.getData("text");
        event.target.appendChild(document.querySelector(`#${moveItem}`));
    });

7.最终效果

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
        html,
        body {
            padding: 0px;
            margin: 0px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        #container1 {
            width: 600px;
            height: 300px;
            border: 1px solid red;
            margin-bottom: 30px;
        }
        
        #container2 {
            width: 50px;
            height: 50px;
            background-color: gray;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- container1：目标放置元素 -->
    <div id="container1">1</div>
    <!-- 
        container2：被拖拽元素
        {
            draggable:true, 设置元素为可拖拽
            draggable:false, 设置元素不可拖拽
            draggable:auto, 使用浏览器默认行为
        }
     -->
    <div id="container2" draggable="true">2</div>
</body>

<script>
    // 获取目标放置元素
    const container1 = document.querySelector("#container1");
    // 获取被拖拽元素
    const container2 = document.querySelector("#container2");

    //dragstart：当拖拽元素被拖拽时触发的事件
    container2.addEventListener("dragstart", (event) => {
        event.dataTransfer.setData("text", event.target.id);
    });

    //dragover：当拖拽元素在目标放置元素上移动的时候触发
    container1.addEventListener("dragover", (event) => {
        event.preventDefault(); //阻止浏览器默认行为，例如阻止打开拖拽元素的链接或文件
    });

    //drop：当拖拽元素放到目标放置元素上释放时触发此事件
    container1.addEventListener("drop", (event) => {
        event.preventDefault(); //阻止浏览器默认行为，例如阻止打开拖拽元素的链接或文件
        const moveItem = event.dataTransfer.getData("text");
        event.target.appendChild(document.querySelector(`#${moveItem}`));
    });
</script>

</html>

无味1858

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
站住，你懂html拖拽吗？

draggable作用是规定元素是否可拖动，注意链接和图像默认是可以拖动的，并且他可以设置3种状态。2.在被拖拽元素container2上面设置draggable=true。5.设置dragover：当拖拽元素在目标放置元素上移动的时候触发。6.设置drop：当拖拽元素放到目标放置元素上释放时触发此事件。4.设置dragstart：当拖拽元素被拖拽时触发的事件。3.获取目标放置元素和被拖拽元素。
复制链接

扫一扫