Html5、原生js实现拖放实例

用原生js写了一个拖放操作的案例，先看效果：

 该案例主要先把歌曲列表里的 li 元素的内容拖放复制到 “我喜欢”这个盒子里，然后可以把刚刚拖放复制的内容再次拖放到“垃圾桶”这个盒子里删除掉。

代码如下：

html：

    <div id="wrap">
        <div id="list">
            歌曲列表
            <hr>
            <div class="box">
                <ul>
                    <li>《有何不可》</li>
                    <li>《素颜》</li>
                    <li>《玫瑰花的葬礼》</li>
                    <li>《万有引力》</li>
                    <li>《有点甜》</li>
                    <li>《后会无期》</li>
                    <li>《犯贱》</li>
                    <li>《红装》</li>
                </ul>
            </div>
        </div>
        <div id="save">我喜欢<hr><ul></ul></div>
        <div id="trash">垃圾桶</div>
    </div>

css:

        *{margin: 0;padding: 0;}
        #wrap{
            position: relative;
            width: 100%;
            height: 700px;
            background-color: pink;
        }
        #list{
            width: 100%;
            height: 200px;
            border-bottom: 1px solid rgb(243, 165, 178);
            margin-left: 2px;
        }
        li{
            list-style-type: none;
            float: left;
            cursor: pointer;
        }
        .box{
            width: 100%;
            height: 100px;
            /* border: 1px solid red; */
            text-align: center;
            margin-top: 3px;
        }
        .box ul{
            width: 100%;
            margin-top: 3px;
        }
        #save{
            width: 400px;
            height: 450px;
            border: 1px solid #000;
            margin-top: 5px;
            margin-left: 2px;
        }
        #trash{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            border-radius: 50%;
            position: absolute;
            right: 400px;
            bottom: 150px;
            text-align: center;
            line-height: 200px;
        }

js:

var lis =document.querySelector('.box').querySelectorAll('li');
var save =document.getElementById('save');
var ul =document.getElementById('save').querySelector('ul');
var trash =document.getElementById('trash');
function Save(){
    // 开始拖放
    for(var i=0;i< lis.length;i++){
        lis[i].index=i;
        lis[i].onmouseover =function(){
            this.setAttribute('id',this.index);  //根据this.index的值给li标签添加不同的id
            this.setAttribute("draggable","true");  //给li标签添加拖放属性 draggable = "true";
        }
        lis[i].onmouseout =function(){
            this.removeAttribute('id',this.index);
        }
        lis[i].ondragstart =function(e){
            //存入数据
            e.dataTransfer.setData('id',e.target.id);
            e.dataTransfer.effectAllowed ='copy';
        }
        // 进入某个元素
        save.ondragenter =function(){
            this.style.border='2px solid red';
        }
        
        // 离开某个元素
        save.ondragleave =function(){
            this.style.border ='';
        }
        
        // 取消某个元素的默认行为
        save.ondragover =function(e){e.preventDefault();}
        // 放开鼠标
        save.ondrop =function(e){
            // 获取数据
            var data =e.dataTransfer.getData('id');
            var res =document.getElementById(data).cloneNode(true);//如果不想原数据被删除的话，就克隆一份
            ul.appendChild(res);
            this.style.border ='';
        }
        
    }
    save.ondragstart =function(e){
        e.dataTransfer.setData('li',e.target.id);
        e.dataTransfer.effectAllowed ='copy';
    }
    trash.ondragenter =function(){
        this.style.border='2px solid red';
    }
    trash.ondragleave =function(){
        this.style.border ='';
    }
    trash.ondragover =function(e){e.preventDefault();}
    trash.ondrop =function(e){
        var data1 =e.dataTransfer.getData('li');
        console.log(data1);
        var res1 =document.getElementById(data1);

        var x=confirm('是否删除'+res1.innerHTML+'?');
        if(x==true){
            trash.appendChild(res1);
            alert('删除成功');
            this.removeChild(res1);
        }else{
            trash.appendChild(res1.cloneNode());
            alert('删除失败');
            this.style.border = '';
            this.removeChild(res1);
        }
        this.style.border ='';
    }
}
Save();

补充一下：

dataTransfer.setData()使用方法：dataTransfer.setData(format,data);

format：表示要传入数据的数据类型

data：表示要传入的数据