html5拖放-垃圾桶效果

        ul{
            overflow: hidden;
        }
        li{
            width: 80px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 1px solid #333;
            margin: 20px;
            list-style: none;
            float: left;
        }
        #out{
            width: 100px;
            height: 150px;
            background: url("../img/ljt.png") 0 20px no-repeat;
            margin: 100px;
            background-size: 100%;
            color: red;
            border: 4px solid #000;
            text-align: center;
        }

    <ul>
        <li draggable="true">白色垃圾</li>
        <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>

    function $(id){
        return document.getElementById(id);
    }
    var oLi = document.getElementsByTagName(‘li‘);
    var oDiv = $(‘out‘);
    var txt = $(‘txt‘);
    var targetOli = null;//设置一个当前拖拽的oLi元素，
    var img = document.createElement(‘img‘);//设置一个拖动时光标下显示的图像。
    img.src = ‘../img/icon.png‘;
    for(var i = 0; i < oLi.length; i++){
        oLi[i].ondragstart = function(ev){//拖拽元素时给元素背景添加黄颜色
            this.style.background = ‘yellow‘;
            targetOli = this;//将当前的元素赋值给变量
            ev.dataTransfer.setData(‘Text‘,this.innerHTML);//设置一个文本类型的存储数据
            ev.dataTransfer.setDragImage(img,20,20)//光标下的图像x轴和y轴的位置
        }
        //停止拖拽时清空它的背景颜色
        oLi[i].ondragend = function(ev){
            this.style.background = ‘‘;
        }
    }
    //垃圾桶投放区一系列的执行函数
    oDiv.ondragenter = function(){
        this.style.borderColor = ‘red‘;//当进入投放区域时，改变垃圾桶的边框颜色
    }
    //设置在投放区持续触发的事件，这里需要阻止默认事件，如果不阻止，最后一步的drop事件将无法触发
    oDiv.ondragover = function(ev){
        ev.preventDefault();
    }
    //离开投放区触发的事件，将垃圾桶的边框颜色变成黑色
    oDiv.ondragleave = function(){
        this.style.borderColor = ‘#000‘;
    }
    //进行最后一个drop事件
    oDiv.ondrop = function(ev){
        this.style.borderColor = ‘#000‘;
        var oText = ev.dataTransfer.getData(‘Text‘);//取出拖拽元素之前存放在dataTransfer对象中的数据,存储数据类型是Text.
        txt.innerHTML = ‘删除的是:‘ + oText;//显示这个存放的数据
        targetOli.parentNode.removeChild(targetOli);//删除当前的拖拽元素
    }