JavaScript 小案例拖拽和投放删除_js实现鼠标变为垃圾桶图标-CSDN博客

本文链接：https://blog.csdn.net/weixin_38404899/article/details/86664694

功能：

1.用鼠标图片拽元素，元素变色，鼠标跟随出现默认图片，鼠标松开默认图片消失，元素恢复原状。
2.拖拽至垃圾箱时，垃圾箱高亮提示。
3.鼠标在垃圾箱松开，当前拖拽元素消失。
4.文字显示刚刚删除的元素。
在这里插入图片描述
所有代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽和投放</title>
    <style>
        ul{
            overflow: hidden;
        }
        li{
            width: 80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            border: 1px solid black;
            list-style: none;
            float:left;
            margin-right: 20px;
        }
        #out{
            clear: both;
            width: 160px;
            height: 90px;
            text-align: center;
            line-height: 90px;
            margin-left: 100px;
            margin-top: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<h1>垃圾桶效果</h1>
<ul>
    <li draggable="true">白色垃圾</li>
    <li draggable="true">大气污染</li>
    <li draggable="true">香蕉皮</li>
    <li draggable="true">易拉罐</li>
</ul>
<!--用于提示用户当前删除的是什么-->
<p id="txt"></p>
<div id="out">垃圾箱</div>
</body>
</html>
<script>
    window.onload = function () {
        //获取每个要用到的元素
        var ali=document.getElementsByTagName("li");
        var oDiv = document.getElementById("out");
        var txt = document.getElementById("txt");
        var targetLi = null;
        //创建一个img标签用于拖动时的图标
        var img = document.createElement("img");
        img.src = "img/bbb.jpg";
        //给每个li绑定拖拽事件
        for(var i=0;i<ali.length;i++){
            ali[i].ondragstart = function (ev) {
                this.style.background="yellow";
                targetLi = this;
                //定义拖拽的数据类型(文本)
                ev.dataTransfer.setData("text",this.innerHTML);
                //定义图标显示和位置
                ev.dataTransfer.setDragImage(img,20,20);
            }
            //拖拽li事件 拖拽时将li的背景色清空
            ali[i].ondragend=function () {
                this.style.background=""
            }
        }
        oDiv.ondragenter=function () {
            this.style.borderColor="red"
        }
        //阻止禁止投放的默认事件 重点
        oDiv.ondragover=function (ev) {
            ev.preventDefault()
        }
        oDiv.ondragleave=function () {
            this.style.borderColor="#000"
        }
        //投放事件
        oDiv.ondrop=function (ev) {
            this.style.borderColor="#000";
            //获取拖拽的数据类型
            var oText=ev.dataTransfer.getData("text");
            txt.innerHTML="删除的是:"+oText;
            //targetLi=this,当前li的父级ul的孩子，找到当前li，删除
            targetLi.parentNode.removeChild(targetLi);
        }
    }
</script>