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>

到这里实现拖放结束。

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

赞 (0)

相关推荐

  • 谈谈对JavaScript原生拖放的深入理解

    前面的话 拖放(drag-and-drop,DnD)其实是两个动作--拖和放.所以,它涉及到两个元素.一个是被拖的元素,称为拖放源:另一个是要放的目标,称为拖放目标.本文将通过拆分这两个概念来详细介绍原生拖放 拖放源 什么样的元素才是拖放源呢? HTML5为所有HTML元素规定了一个draggable属性,表示元素是否可以拖动 图像和链接的draggable属性自动被设置成了true,而其他元素这个属性的默认值都是false [注意]必须设置draggable='true'才能生效,只设置dra

  • JavaScript实现的多种鼠标拖放效果

    JavaScript实现的多种鼠标拖放效果

    本文实例讲述了JavaScript实现的多种鼠标拖放效果.分享给大家供大家参考,具体如下: 这是一款JavaScript鼠标拖放效果代码,通过本示例了解触发对象,设置范围限制,指定容器大小水平及垂直锁定,还包括获取和释放焦点等. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mouse-move-fix-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

  • Vue.js实现拖放效果的实例

    Vue.js实现拖放效果的实例

    页面效果如下所示: 代码请看这里,当当当当: html: <template> <div class='drag-content'> <div class='project-content'> <div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div> </div>

  • Javascript拖拽&拖放系列文章3之细说事件对象第1/4页

    Javascript拖拽&拖放系列文章3之细说事件对象第1/4页

    在阅读本文前,可以先阅读<Javascript拖拽&拖放系列文章2之offsetLeft.offsetTop.offsetWidth.offsetHeight属性>这篇文章,以理清上下文关系.好了,让我们开始进入正题. 模型相同的属性/方法 1 Button属性 Integer类型,可读可写.对于特定的鼠标事件,表示按下的鼠标按钮,它可以在拖拽的时候,判断是否是鼠标左键引发mousedown事件.它的所有取值及其意义(参考自<Javascript高级程序设计>)好了,让我们

  • 浅谈js原生拖放

    可拖动 网页中的图像.链接和文本是浏览器默认可以被拖动的,HTML5 为所有的HTML元素都提供了一个draggable属性,当这个属性的值为true的时候,元素被视为可以拖动. 拖动图像或者链接时,将鼠标放在图像或者链接上,按住鼠标不放就可以拖动它.拖动文本时,要先选中文本,然后可以像拖动图像一样拖动选中的文本. 被拖动的元素事件 拖动图片时依次触发:drapstart,drag,dragend事件.这三个事件的目标都是被拖动的元素. 按下鼠标键并开始移动鼠标时,会在被拖放元素上触发drags

  • javascript实现拖放效果

    javascript实现拖放效果

    本文实例为大家分享的是一个拖放的效果,参考的代码,重构以下,加以理解学习. 首先来看效果: 拖动div 拖放状态:未开始 [程序说明] 拖动原理:其实就是在拖动块上监听mousedown事件,鼠标点击时,通过事件对象获取对应的坐标参数.然后鼠标移动时再监听document上的mousemove事件,获取鼠标的clientX 和clientY坐标然后设置拖动块的left 和 top. 首先是监听mousedown事件 复制代码 代码如下: EventUtil.addEventHandler(thi

  • JS实现的简易拖放效果示例

    本文实例讲述了JS实现的简易拖放效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • javascript 拖放效果实现代码

    有许多理由让你在页面中加入拖放的功能,其中最简单的理由是重新组织数据.举个例子,你可能希望用户能够重组一系列的页面元素,通过放置一个input或 select组件在各个元素的旁边来代表它们的顺序是一种解决方案,使该组元素可以被拖放是一种替代方案.或者也许你想在网站上拥有一个可以被用户移动的导航窗口.这些都是使用拖放功能的简单理由,因为你能够实现! 在你的网页上实现拖放的效果并不是很复杂.首先,我们知道鼠标的位置,然后我们需要了解用户什么时候点击一个元素,以至于我们知道要准备开始拖动它,最后我们要

  • 基于JavaScript 实现拖放功能

    HTML 的拖放 API 依赖 DOM 事件模型,获取拖放和放置元素的相关信息,以此实现拖放功能.我们只需要注册很少几个事件监听器,就能把任何元素变成可拖动或可放置的. 拖放 API 除了提供基本的拖放功能接口外,还可以在拖放之外提供选择,用来自定义行为.比如,可以修改拖放元素的 CSS 样式.或者,我们不移动元素,拖动的时候,复制一个副本,拖放结束后,我们就会多了一个同样的元素. 本篇只介绍实现基本的拖放功能. 将元素设置成可拖动的 我们先从拖动元素开始.假设我们有一个容器元素,其中包含两种类

  • JavaScript实现网页对象拖放功能的方法

    本文实例讲述了JavaScript实现网页对象拖放功能的方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Drag</title> <meta http-equiv=

随机推荐