用原生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:表示要传入的数据