html5拖放-垃圾桶效果

html5拖放-垃圾桶效果

 

    什么事拖放（drag）

        drag&drop：拖放指的是html5提供专门的拖拽与投放的API

    拖放api的用处/优势

        1.提供专门的拖拽与投放的API

        2.触发多个事件，可控制鼠标的形状与移动时的效果

        3.可以跨页面拖放

    拖放api的基本操作语法

        draggable属性

        拖拽事件-

            ondragstart：鼠标按下并开始移动时触发,

            drag：元素拖拽过程中持续触发,

            dragend：元素停止拖拽时触发的函数

        投放时间-

            dragenter,当我们的拖拽对象进入投放区域时

            dragover,当拖拽对象在投放区域移动时持续触发的函数

            dragleave,当拖拽对象离开投放区域时

            drop，拖拽对象投放在了投放区时触发的函数

        因为浏览器对DOM元素的默认都是不允许一个DOM元素拖放到另一个DOM元素内的，所以我们在投放区的事件里边都要进行阻止默认事件，尤其是在dragover中一定要执行阻止默认事件，所以在投放区时，我们一定要注意默认事件的阻止，

        dataTransfer对象

            专门用于携带拖放过程中的数据，

            setData：将拖拽元素的数据存入到dataTransfer对象当中去，由这个对象来存放携带元素的数据

            getData：读取

            setDragImage：来指定一个图标，当发生拖动时，显示在光标下方的一个图标是什么

    利用拖放api+js实现垃圾桶效果 

css

        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;
        }

html

    <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>

js

    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);//删除当前的拖拽元素
    }