好资源导航 » 文章资讯 » js利用拖放实现添加删除

js利用拖放实现添加删除

2023-07-17 22:53:03 73

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

实现的效果如下：

代码如下：





通过拖放实现添加删除

div>div{
display:inline-block;
padding:10px;
background-color:#aaa;
margin:3px;
}





可将喜欢的项目拖进收藏夹
疯狂Java联盟

疯狂软件教育

关于我们

疯狂成员

收藏夹 letdest=document.getElementById("dest"); //开始拖动事件的事件监听器 letdsHandler=function(event){ event.dataTransfer.setData("text/plain",""+event.target.innerHTML); } dest.function(event){ event.preventDefault(); lettext=event.dataTransfer.getData("text/plain"); //如果该text以开头 if(text.indexOf("")==0){ //创建一个新的div letnewEle=document.createElement("div"); //以当前事件为该元素生成唯一的ID newEle.id=newDate().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){ letid=event.dataTransfer.getData("text/plain"); //如果id以开头 if(id.indexOf("")==0){ //根据“拖”过来的数据，获取被拖动的元素 lettarget=document.getElementById(id.substring(8)); //删除被拖动的元素 dest.removeChild(target); } } //ondragover被拖动的元素进入本元素的范围内拖动时会不断地触发该事件 document.function(event){ //取消事件的默认行为 returnfalse; } //ondrop其他元素被放到了本元素中时触发该事件 document.function(event){ //取消事件的默认行为 returnfalse; }

到这里实现拖放结束。

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

js利用拖放实现添加删除

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

热门推荐

随机推荐