js实现拖拽元素选择和删除

本文实例为大家分享了js实现拖拽元素选择和删除的具体代码,供大家参考,具体内容如下

我们上网的时候讲过一些平台在选择一些选项的时候采用拖拽的方式将选项拖入指定位置完成选择,现在我们就自己来实现一下类似的效果。

结果如下:

代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>js置顶动画</title>
 <style>
  *{margin:0;padding:0;user-select:none;}
  .move-box {height:100px;width:100px;line-height:100px;text-align:center;font-size:14px;background:#ccc;margin:0 auto;position:relative;transition:all .1s;}
  .drag-box{width:1000px;margin:100px auto;border:1px dashed #ccc;font-size:0;background:url('./img/bg1.png') no-repeat center;background-size:80px;}
  .drag-box::after{content:'';display:block;clear:both;} /***清浮动***/
  .drag-box .label{height:100px;width:0;color:#fff;line-height:0;text-align:center;font-size:14px;display:inline-block;background:blue;}
  .drag-box .close-btn{padding:2px;margin-left:10px;background:#eee;}
 </style>
</head>
<body>
 <div class="move-box">拖动元素</div>
 <div class="drag-box">
 <div class="label"></div>
 </div>
</body>
<script>
 (function(){
 let boxId = 0;
 let startX = null;
 let startY = null;
 let mouseX = null;
 let mouseY = null;
 let mBox = null;
 function $$(str) {return document.querySelectorAll(str);}
 // 计算鼠标是否在需要放置的框内
 function computInEle(ele, x, y){
  let left = ele.getBoundingClientRect().left;
  let top = ele.getBoundingClientRect().top;
  let width = ele.getBoundingClientRect().width;
  let height = ele.getBoundingClientRect().height;
  let xFlag = ( x > left && x < (left + width));
  let yFlag = ( y > top && y < (top + height));
  if (xFlag && yFlag) {
  return true;
  } else {
  return false;
  }
 }
 // 删除元素
 $$('.drag-box')[0].onclick = function(e){
  console.log(e);
  if (e.srcElement.className == 'close-btn') {
  this.removeChild(e.srcElement.parentNode);
  setTimeout(() => {
   alert('删除成功!');
  }, 0);
  }
 }
 // 鼠标按下复制一个元素
 $$('.move-box')[0].onmousedown = function(e){
  mouseX = e.pageX;
  mouseY = e.pageY;
  startX = this.getBoundingClientRect().left;
  startY = this.getBoundingClientRect().top;
  console.log(this.getBoundingClientRect());
  // 复制一个元素追加到body模拟跟随鼠标移动效果
  mBox = this.cloneNode(true);
  mBox.style.position = 'fixed';
  mBox.style.zIndex = '9999';
  mBox.style.opacity = '.75';
  mBox.style.left = startX + 'px';
  mBox.style.top = startY + 'px';
  mBox.id = 'moveBox' + (boxId++);
  document.body.appendChild(mBox);
  document.onmousemove = function(e){
  mBox.style.left = startX + (e.pageX - mouseX) + 'px';
  mBox.style.top = startY + (e.pageY - mouseY) + 'px';
  };
 };
 // 鼠标按下放开事件
 document.onmouseup = function(e){
  let x = e.pageX;
  let y = e.pageY;
  let ele = $$('.drag-box')[0];
  console.log(computInEle(ele, x, y));
  if (mBox) {
  // 松开鼠标时鼠标在拖拽框内,则将复制的元素追加到拖拽框内
  if (computInEle(ele, x, y)) {
   mBox.style.position = 'static';
   mBox.style.display = 'block';
   mBox.style.float = 'left';
   mBox.style.margin = 'auto';
   mBox.style.opacity = '1';
   mBox.innerText = mBox.innerText +(boxId - 1);
   let close = document.createElement('span');
   close.className = 'close-btn';
   close.innerText = '×';
   close.title = '删除元素';
   mBox.appendChild(close);
   ele.appendChild(mBox);
   mBox.onmousedown = null;
  } else {
   // 松开鼠标时鼠标不在拖拽框内,移除复制的元素
   mBox.style.left = startX + 'px';
   mBox.style.top = startY + 'px';
   document.body.removeChild(document.body.lastElementChild);
  }
  startX = null;
  startY = null;
  mouseX = null;
  mouseY = null;
  mBox = null;
  document.onmousemove = null;
  }
 };
 })();
</script>
</html>

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

时间: 2020-08-20

利用JavaScript实现拖拽改变元素大小

大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当点击这个范围时表明我们想要改变它的大小 当我们点击方块的这些红色区域时,方快就知道我们想要改变它的大小 代码实现: // 获取event对象,兼容性写法 var ev = ev || event; // 鼠标按下时的位置 var mouseDownX = ev.clientX; var mouseDownY = ev.clientY; // 方块上下

vuejs2.0运用原生js实现简单的拖拽元素功能示例

整理文档,搜刮出一个vuejs2.0运用原生js实现简单的拖拽元素功能示例,留作笔记. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta

JavaScript实现拖拽网页内元素的方法

本文实例讲述了JavaScript实现拖拽网页内元素的方法.分享给大家供大家参考.具体如下: 这段代码详细讲述了JS拖拽的原理和方法,值得学习和借鉴. /** * 跨平台的事件监听函数 * @param {Node} node 需要监听事件的DOM节点 * @param {String} eventType 需要监听的事件类型 * @param {Function} callback 事件监听回调函数 * @type Function 返回值为函数类型 * @return 返回监听回调函数的引用

javascript实现拖拽并替换网页块元素

找了一些现成的插件,发现都不太符合我的需求,于是参考网上的例子自己实现了一个,还没有优化.  还是贴代码吧: dragtoreplace DragToReplaceDeom #displayRoom{background:#eee;position:relative;float:left;clear:both;padding:30px 0px 0px 20px;margin-left:20px;margin-top:10px;} .row{display:inline-block;float:l

jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)

本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法.分享给大家供大家参考,具体如下: 该插件是文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

JavaScript实现拖拽元素对齐到网格(每次移动固定距离)

这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图,可以看到,每次元素的移动都是按照最小单位距离移动的.且每次元素都是对齐到网格的. 先根据demo说明一下思路和细节,后面会给出demo代码. 1. 确定元素的每次移动的最小单位(demo中为10px和10px),也就是每次水平或垂直的位移量都是10px.铺上一层网格背景是为了帮助我们更好的看到效果

vuejs2.0运用原生js实现简单拖拽元素功能

本文实例为大家分享了vuejs2.0实现简单拖拽元素功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <me

JS实现的简单拖拽购物车功能示例【附源码下载】

本文实例讲述了JS实现的简单拖拽购物车功能.分享给大家供大家参考,具体如下: <html> <head> <meta charset="utf-8" /> <title>使用拖放API将商品拖入购物车</title> <style> body { font-size:12px } .liT{ border-bottom:solid 1px #ccc; background-color:#eee; font-weig

vue2.0使用Sortable.js实现的拖拽功能示例

简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但是当把vue升级到2.0以上后发现拖拽功能失效了,于是使用了下面代码. 该案例主要是在用于vuejs2.0中实现的拖拽功能,用到的的js有Sortable.js,vuedraggable.js,当然还有vue.min.js,提供的案例使用的require.js加载. 实现效果 实现后的效果如图所示:

原生js实现自由拖拽弹窗代码demo

本文为大家分享了原生弹窗拖拽代码demo,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹窗拖拽</title> <style> *{margin:0;padding:0;} .box{position: absolute;width: 400

原生JS实现圆环拖拽效果

最近用原生JS写一个环形的鼠标滑动效果,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;padding:0;} div{width:50px;height:50px;border-radius:50%;positio

JS实现简单拖拽效果

本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #wrap { position: relative; border:

原生js实现可拖拽效果

效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>可拖拽特效</title> <style type="text/css"> *{margin: 0;padding: 0;} .header{width:100%;height:30px;backgrou

运用js实现图层拖拽的功能

1.需求分析:设计一个元素,可以跟随鼠标的移动,元素也进行移动,并且能够在鼠标按上与按下元素的时候,元素同样可以进行改变样式颜色. 2. 设计思路:先是需要获取元素,给元素绑定鼠标按下的事件,在绑定的事件中,兼容event事件,获取鼠标的坐标和元素的坐标,通过鼠标的坐标减去元素的坐标就可以得到鼠标在元素中的坐标.在绑定事件中,写上一个元素的移动事件,获取元素的移动坐标.最后,在鼠标按上的事件函数中,可以调用元素的移动事件就可以了. <!DOCTYPE html> <html lang=&

js实现控制文件拖拽并获取拖拽内容功能

在用户拖拽文件到浏览器的某个元素上时,js可以监听到与拖拽相关的事件,并对拖拽结果进行处理,本文讨论下和拖拽文件相关的一些问题,不过没有处理太多关于兼容性的问题. 拖拽事件 js能够监听到拖拽的事件有drag.dragend.dragenter.dragexit(没有浏览器实现).dragleave.dragover.dragstart.drop,详细的内容可以看MDN. 其中,与拖拽文件相关的事件有dragenter(文件拖拽进).dragover(文件拖拽在悬浮).dragleave(文件拖