【利用js实现拖拽案例】

最新推荐文章于 2024-03-16 09:36:30 发布

夜星639

最新推荐文章于 2024-03-16 09:36:30 发布

阅读量105

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_65923595/article/details/123500418

版权

这个示例展示了如何使用HTML5的拖放API将圆形状的div元素从一个容器（box1）拖动到另一个容器（box2）中。页面包含8个可拖动的圆形div，每个都有不同的数字标识。拖放功能通过JavaScript实现，允许用户将元素从一个盒子移动到另一个盒子，并在释放时将元素附加到目标盒子。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 400px;
            height: 400px;
            border:1px solid chartreuse;

        }
        .box1 div,.box2 div{
            width: 100px;
            height:100px;
            background-color: coral;
            border-radius: 50%;
            float: left;
            }   
            .box2{
                width: 400px;
                height: 400px;
                position: absolute;
                top: 50px;
                text-align: center;
                border: 1px solid rebeccapurple;
                left: 500px;
            }     
    </style>
</head>
<body>
    <div class="box1">
        <div draggable="true">1</div>
        <div draggable="true">2</div>
        <div draggable="true">3</div>
        <div draggable="true">4</div>
        <div draggable="true">5</div>
        <div draggable="true">6</div>
        <div draggable="true">7</div>
        <div draggable="true">8</div>
    </div>
    <div class="box2"></div>
    <script>
        var box1 = document.querySelector(".box1");
        var box2 = document.querySelector(".box2");
        var divs = document.querySelectorAll(".box1 div");
        var temp = null;
        for(var i = 0; i < divs.length;i++){
            divs[i].ondragstart = function(){
                temp = this;
            }
        }
        box2.addEventListener("dragover",function(e){
            e.preventDefault();
        })
        box2.addEventListener("drop",function(e){
            box2.appendChild(temp);
            temp = null;
        })
    </script>
</body>
</html>