h5拖拽ondrop删除、添加

Hermia_yuan

已于 2022-04-17 22:36:26 修改

阅读量475

点赞数

文章标签： html5

于 2022-04-17 22:35:32 首次发布

本文链接：https://blog.csdn.net/Hermia_yuan/article/details/124238358

版权

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .maxbox{
            width: 500px;
            height: 500px;
            border: 1px solid grey;
            padding: 10px 50px;
            margin: 20px auto;
        }
        .box{
            height: 80%;
            display: flex;
            justify-content: space-between;
        }
        .leftbox{
            width: 35%;
            background-color: grey;
        }
        .leftbox p{
            font-size: 100px;
            text-align: center;
        }
        .rightbox{
            width: 60%;
        }
        .rightbox p{
               width: 100%;
               height: 54px;
               border: 1px dotted grey;
               margin-bottom: 4px;
               line-height: 54px;
               padding-left: 20px;
               background-color: rgb(207, 207, 207);
               font-size: 14px;
        }
        .foot{
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid grey;
            font-size: 24px;
            margin: 20px 0px;
        }
        .list{
            width: 100px;
            height: 200px;
            border: 1px solid grey;
        }
    </style>
</head>
<body>
    <div class="maxbox">
        <div class="box">
            <div class="leftbox">
                <p>垃</p>
                <p>圾</p>
                <p>桶</p>
            </div>
            <div class="rightbox">
                <p class="pcontent" draggable="true">1号杯子</p>
                <p class="pcontent1" draggable="true">2号杯子</p>
                <p class="pcontent2" draggable="true">3号杯子</p>
                <p class="pcontent4" draggable="true">4号杯子</p>
                <p class="pcontent5" draggable="true">5号杯子</p>
                <p class="pcontent6" draggable="true">6号杯子</p>
            </div>
        </div>
        <div class="foot">拖到垃圾箱删除列表</div>
        <div class="list"></div>
    </div>
    
</body>
<script>
    // 找到p标签
    let pContent = document.getElementsByClassName("pcontent")[0]
    let rightbox = document.getElementsByClassName("rightbox")[0]
    
    // 找到垃圾桶
    let leftBox = document.getElementsByClassName("leftbox")[0]


    let list = document.getElementsByClassName("list")[0]

    let ele = null;
    // ondragstart当拖拽开始时调用
    document.ondragstart = function(e){
        ele = e.target
        console.log(e);
    }
    // ondragover当停留在目标元素上时调用
    leftBox.ondragover = function(e){
        e.preventDefault();  
        // console.log(1111);                                                          
    }
    // ondrop当在目标元素上松开鼠标时调用--浏览器默认阻止ondrop事件：我们必须要在ondragover中阻止浏览器的默认行为
    leftBox.ondrop = function(e){
        ele.remove();    //ele 是当前点击的对象 就是点击的盒子
        // list.append(ele);
        rightbox.removeChild(ele)
    }

    // leftBox.ondragover = function(e){
    //     e.preventDefault();                                                          
    // }

    // leftBox.ondragleave = function(e){
    //     // list.append(ele);
    // }















    // leftBox.ondragenter = function(e){
    //     // e.preventDefault();  
    //     console.log("当拖拽元素进入时调用");                                                          
    // } 
    // leftBox.ondrop = function(e){
    //     // e.preventDefault();  
    //     console.log("目标元素上松开鼠标时调用");                                                          
    // } 
    // leftBox.ondragleave = function(e){
    //     // e.preventDefault();  
    //     console.log("当鼠标离开目标元索时调用");                                                          
    // }
</script>
</html>

Hermia_yuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5拖拽ondrop删除、添加

<!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>Do.
复制链接

扫一扫