介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元http-equiv=癈ontent-Type"内容=拔谋?html"charset=皍tf-8"比;
& lt; title>通过拖放实现添加删除& lt;/title>
& lt;风格类型=拔谋?css"比;
div> div {
显示:inline-block;
填充:10 px;
background - color: # aaa级;
保证金:3 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; !——文件所在地——比;
& lt; div比;
& lt; h3>可将喜欢的项目拖进收藏夹& lt;/h3>
& lt;拖div=皌rue"“dsHandler(事件);“祝辞疯狂Java联盟& lt;/div>
& lt;拖div=皌rue"“dsHandler(事件);“祝辞疯狂软件教育& lt;/div>
& lt;拖div=皌rue"“dsHandler(事件);“祝辞关于我们& lt;/div>
& lt;拖div=皌rue"“dsHandler(事件);“祝辞疯狂成员& lt;/div>
& lt;/div>
& lt; !——收藏夹——比;
& lt; div id=癲est"比;
& lt; h3“返回false;“在收藏夹& lt;/h3>
& lt;/div>
& lt; !——垃圾篓——比;
& lt; img id=癵b"可拖动的=癴alse"alt=袄ā?src=https://www.yisu.com/zixun/" C:/用户/管理员/桌面/timg.jpg”>
<脚本type=" text/javascript”>
让dest=. getelementbyid(“桌子”);//开始拖动事件的事件监听器
让dsHandler=函数(事件){
event.dataTransfer.setData(“文本/普通”、“- ”+ event.target.innerHTML);
}
dest.function(事件){
event.preventDefault ();
让文本=event.dataTransfer.getData (" text/plain”);//如果该文本以
- 开的头
如果(text.indexOf (“
- ”)==0) {//创建一个新的div
让newEle=document.createElement (" div ");//以当前事件为该元素生成唯一的ID
newEle。.getUTCMilliseconds id=新的日期()();//该元素内容为“拖”过来的数据
newEle.innerHTML=text.substring (6);//设置该元素允许拖动
newEle.draggable=" true ";//为该事件的开始拖动事件指定监听器
newEle.function(事件){//将被拖动元素的id属性值设置成被拖动的数据
event.dataTransfer.setData(“文本/普通”、“<删除>”+ newEle.id);
}
dest.appendChild (newEle);
}
}//当把被拖动元素“放”到垃圾篓上时触发该方法
. getelementbyid (gb) .function(事件){
让id=event.dataTransfer.getData (" text/plain”);//如果id以<删除>开的头
如果(id.indexOf(“<删除>”)==0){//根据“拖”过来的数据,获取被拖动的元素
让目标=. getelementbyid (id.substring (8));//删除被拖动的元素
dest.removeChild(目标);
}
}//ondragover被拖动的元素进入本元素的范围内拖动时会不断地触发该事件
document.function(事件){//取消事件的默认行为
返回错误;
}//ondrop其他元素被放到了本元素中时触发该事件
document.function(事件){//取消事件的默认行为
返回错误;
}>
利用JavaScript实现一个拖放删除功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
实现的效果如下:
代码如下: