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 load Page,load css,load js实现代码
Mar 31 Javascript
JQuery Dialog的内存泄露问题解决方法
Jun 18 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
JS定时关闭窗口的实例
May 22 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
基于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
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
详解如何较好的使用js
2016/12/16 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python中sleep函数用法实例分析
2015/04/29 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
深入浅析python的第三方库pandas
2020/02/13 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
领导班子作风建设剖析材料
2014/10/11 职场文书
违纪学生保证书
2015/02/27 职场文书
人工作失职检讨书
2015/05/05 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书