js利用拖放实现添加删除


Posted in Javascript onAugust 27, 2020

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

实现的效果如下:

js利用拖放实现添加删除

代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
 <title>通过拖放实现添加删除</title>
 <style type="text/css">
 div>div{
  display: inline-block;
  padding: 10px;
  background-color: #aaa;
  margin: 3px;
 }
 </style>
</head>
<body>
 <!-- 文件所在地 -->
 <div style="width: 600px;border: 1px solid black;">
 <h2>可将喜欢的项目拖进收藏夹</h2>
 <div draggable="true" "dsHandler(event);">疯狂Java联盟</div>
 <div draggable="true" "dsHandler(event);">疯狂软件教育</div>
 <div draggable="true" "dsHandler(event);">关于我们</div>
 <div draggable="true" "dsHandler(event);">疯狂成员</div>
 </div>
 <!-- 收藏夹 -->
 <div id="dest" style="width: 400px;height: 260px;border: 1px solid black;float: left;">
 <h2 "return false;">收藏夹</h2>
 </div>
 <!-- 垃圾篓 -->
 <img id="gb" draggable="false" alt="垃圾篓" src="C:\Users\Administrator\Desktop\timg.jpg" style="float: left;width: 200px;height: 200px;">

 <!-- js -->
 <script type="text/javascript">
 let dest=document.getElementById("dest");
 //开始拖动事件的事件监听器
 let dsHandler=function(event){
  event.dataTransfer.setData("text/plain","<item>"+event.target.innerHTML);
 }

 dest.function(event){
  event.preventDefault();
  let text=event.dataTransfer.getData("text/plain");
  //如果该text以<item>开头
  if(text.indexOf("<item>")==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","<remove>"+newEle.id);
  }
  dest.appendChild(newEle);
  }
 }

 //当把被拖动元素“放”到垃圾篓上时触发该方法
 document.getElementById("gb").function(event){
  let id=event.dataTransfer.getData("text/plain");
  //如果id以<remove>开头
  if (id.indexOf("<remove>")==0) {
  //根据“拖”过来的数据,获取被拖动的元素
  let target=document.getElementById(id.substring(8));
  //删除被拖动的元素
  dest.removeChild(target);
  }
 }

 //ondragover 被拖动的元素进入本元素的范围内拖动时会不断地触发该事件
 document.function(event){
  //取消事件的默认行为
  return false;
 }

 //ondrop 其他元素被放到了本元素中时触发该事件
 document.function(event){
  //取消事件的默认行为
  return false;
 }
 </script>
</body>
</html>

到这里实现拖放结束。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 #jQuery
Javascript call及apply应用场景及实例
Aug 26 #Javascript
Javascript类型判断相关例题及解析
Aug 26 #Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 #Javascript
Javascript如何实现扩充基本类型
Aug 26 #Javascript
Javascript var变量删除原理及实现
Aug 26 #Javascript
js实现车辆管理系统
Aug 26 #Javascript
You might like
一个用于网络的工具函数库
2006/10/09 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
用js重建星际争霸
2006/12/22 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
校庆口号
2014/06/20 职场文书
英文演讲稿开场白
2014/08/25 职场文书
新课培训心得体会
2014/09/03 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书