【H5】标记精确拖拽小案例：

最新推荐文章于 2022-11-11 22:44:01 发布

舜岳

最新推荐文章于 2022-11-11 22:44:01 发布

阅读量331

点赞数

分类专栏： HTML5 文章标签： HTML5

本文链接：https://blog.csdn.net/qq_41614928/article/details/90340794

版权

HTML5 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

【H5】标记精确拖拽小案例

效果图如下：

在这里插入图片描述

e.dataTransfer //拖拽的时候捕获里面的数据；
setData(“name”,index) //设置存储值为index 存储名为name
getData(“name”) //获取存储名name的值

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    *{margin:0;padding:0;}
    html,body{
        width:100%;
        height:100%;
        display: flex;
        justify-content: space-between;
        user-select: none;
    }
    #left{
        width:150px;
        height:300px;
        background-color: #f00;
    }
    ul>li{
        list-style-type: none;
        width:150px;
        height:30px;
        border:1px solid #0f0;
        background-color: bisque;
        text-align:center;
        line-height: 30px;
        margin:15px 0;
    }
</style>
</head>
<body>
    
    <div id="left"> 请拖拽到此处 </div>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        //    getData,setData() 拿到/设立对应的存储值
        let oli = document.querySelectorAll('li');
        let left = document.getElementById('left');
        oli.forEach(( item , index )=>{
            item.setAttribute('draggable','true')
            item.ondragstart = function(e){
                const dt = e.dataTransfer; // 拖拽的时候捕获里面的数据；
                console.log( dt )
                dt.setData("candy",index) //在每个li设置标记属性 用来区分拖拽的li
            }
        })
        left.ondragenter = function(e){ //进入目标函数触发
            this.innerHTML = '请释放你的鼠标';
        }
        left.ondragover = function(e){  //在目标函数内 持续触发
            e.preventDefault();     //阻止默认事件
            e.stopPropagation();    //阻止冒泡事件
            return false;
        }
        left.ondrop = function(e){  //在目标元素抬起触发
            const dt = e.dataTransfer;  // 获取拖拽物数据；
            list.removeChild(oli[dt.getData("candy")])  //删除当前拖拽物
        }
    </script>
</body>
</html>