鼠标拖拽文件到垃圾桶

1.css

 body{font-size:84%;}
    .dustbin{width:100px; height:260px; line-height:1.4; background-color:gray; font-size:36px; font-family:"微软雅黑", "Yahei Mono"; text-align:center; text-shadow:-1px -1px #bbb; float:left;}
    .dragbox{width:500px; padding-left:20px; float:left;}
    .draglist{padding:10px; margin-bottom:5px; border:2px dashed #ccc; background-color:#eee; cursor:move;}
    .draglist:hover{border-color:#cad5eb; background-color:#f0f3f9;}
    .dragremind{padding-top:2em; clear:both;}

2.html

 <div class="dustbin"><br />垃<br />圾<br />箱</div>
    <div class="dragbox">
        <div class="draglist" title="拖拽我" draggable="true" id="list1">列表1</div>
        <div class="draglist" title="拖拽我" draggable="true" id="list2">列表2</div>
        <div class="draglist" title="拖拽我" draggable="true" id="list3">列表3</div>
        <div class="draglist" title="拖拽我" draggable="true" id="list4">列表4</div>
        <div class="draglist" title="拖拽我" draggable="true" id="list5">列表5</div>
        <div class="draglist" title="拖拽我" draggable="true" id="list6">列表6</div>
    </div>
    <div class="dragremind"></div>

3.js

<script>
        function $(el){
            return document.querySelectorAll(el)
        }

        var drag = $(".draglist");//被拖拽的元素
        var dustbin = $(".dustbin")[0]//垃圾箱
        var dragEle = null;
        
        for(var i=0;i<drag.length;i++){
            drag[i].ondragstart = function(e){
                e.dataTransfer.effectAllowed = 'move'; //用来指定当元素被拖放式所允许的视觉效果
                // e.dataTransfer.setData("text",e.target.id)
                dragEle = e.target;
            }
        }

        dustbin.ondragover = function(ev) {
            /*拖拽元素在目标元素头上移动的时候
                ondragover 事件规定在何处可以放置被拖动的元素。（默认地，无法将数据/ 元素放置到其他元素中。如果需要设置允许放置，则必须阻止对元素的默认事件，即：若想触发ondrop事件，ondragover 中必须阻止默认事件。）所以allowDrop(e)函数里通过e.preventDefault()阻止了默认行为。
            */
            ev.preventDefault();
        };
        dustbin.ondragleave = function(e){
            this.style.color = "#000000";
        }

        dustbin.ondragenter = function(ev) {
            /*拖拽元素进入目标元素头上的时候*/
            this.style.color = "#ffffff";
            return true;
        };


        dustbin.ondrop = function(e){
            dragEle.parentNode.removeChild(dragEle)
            $(".dragremind")[0].innerHTML = "<strong>"+dragEle.innerHTML+"被删除了！</strong>"
            // dragEle = e.dataTransfer.getData("text")
            //  $(".dragbox")[0].removeChild($("#"+dragEle)[0])
            this.style.color = "#000000";
               return false;
        }


         /*
          1.我们想要拖动那个元素，首先要把这个元素设置成可拖拽，将该元素的draggable 属性设置为 true。
              有三个值true,false,auto.  true可以拖，false不可以，auto由用户浏览器是否支持而定 
          2.ondragstart 和dataTransfer.setData()，将被拖动的元素的id值以”text”格式保存在dataTransfer对象中。
            （注：保存在dataTransfer对象中的数据只能在ondrop事件触发的函数中getData来读取）。 
          4. ondragover 事件规定在何处可以放置被拖动的元素。（默认地，无法将数据元素放置到其他元素中。如果需要设置允许放置，则必须阻止对元素的默认事件，即：若想触发ondrop事件，ondragover 中必须阻止默认事件。）
          5. 我们知道了要把元素放到垃圾桶这个div里，而当我们放下元素时发生 ondrop事件，所以要在box这个div里设置ondrop事件
          6.通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置的数据，因为之前setData()设置的是拖拽元素的id值，所以这里返回的就是相应的id值。
        */

    </script>