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 相关文章推荐
一种JavaScript的设计模式
Nov 22 Javascript
js倒计时简单实现方法
Dec 17 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
详解webpack 入门与解析
Apr 09 Javascript
官方推荐react-navigation的具体使用详解
May 08 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
javascript实现简单搜索功能
Mar 26 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
汉字转化为拼音(php版)
2006/10/09 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
JS OffsetParent属性深入解析
2014/01/13 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python在非root权限下的安装方法
2018/01/23 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
用python计算文件的MD5值
2020/12/23 Python
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
华三通信H3C面试题
2015/05/15 面试题
策划创业计划书
2014/02/06 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
护士自荐信怎么写
2015/03/06 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server