html做拖拽删除,js利用拖放实现添加删除

本文实例为大家分享了js利用拖放实现添加删除的具体代码，供大家参考，具体内容如下

实现的效果如下：

代码如下：

通过拖放实现添加删除

div>div{

display: inline-block;

padding: 10px;

background-color: #aaa;

margin: 3px;

}

可将喜欢的项目拖进收藏夹

疯狂Java联盟

疯狂软件教育

关于我们

疯狂成员

收藏夹

let dest=document.getElementById("dest");

//开始拖动事件的事件监听器

let dsHandler=function(event){

event.dataTransfer.setData("text/plain",""+event.target.innerHTML);

}

dest.function(event){

event.preventDefault();

let text=event.dataTransfer.getData("text/plain");

//如果该text以开头

if(text.indexOf("")==0){

//创建一个新的div

let newEle=document.createElement("div");

//以当前事件为该元素生成唯一的ID

newEle.id=new Date().getUTCMilliseconds();

//该元素内容为“拖”过来的数据

newEle.innerHTML=text.substring(6);

//设置该元素允许拖动

newEle.draggable="true";

//为该事件的开始拖动事件指定监听器

newEle.function(event){

//将被拖动元素的id属性值设置成被拖动的数据

event.dataTransfer.setData("text/plain",""+newEle.id);

}

dest.appendChild(newEle);

}

}

//当把被拖动元素“放”到垃圾篓上时触发该方法

document.getElementById("gb").function(event){

let id=event.dataTransfer.getData("text/plain");

//如果id以开头

if (id.indexOf("")==0) {

//根据“拖”过来的数据，获取被拖动的元素

let target=document.getElementById(id.substring(8));

//删除被拖动的元素

dest.removeChild(target);

}

}

//ondragover 被拖动的元素进入本元素的范围内拖动时会不断地触发该事件

document.function(event){

//取消事件的默认行为

return false;

}

//ondrop 其他元素被放到了本元素中时触发该事件

document.function(event){

//取消事件的默认行为

return false;

}

到这里实现拖放结束。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。