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>

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

赞 (0)

相关推荐

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

    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实现拖拽元素对齐到网格（每次移动固定距离）

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

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

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

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

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

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

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

    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

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

    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

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

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

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

    本文实例为大家分享了js实现拖拽元素选择和删除的具体代码,供大家参考,具体内容如下 我们上网的时候讲过一些平台在选择一些选项的时候采用拖拽的方式将选项拖入指定位置完成选择,现在我们就自己来实现一下类似的效果. 结果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js置顶动画</title> <style> *

  • JS实现拖拽元素时与另一元素碰撞检测

    本文给大家分享一个用原生JS实现拖拽元素时与另个一元素碰撞检测的小Demo,效果如下: 实现代码如下, 欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现拖拽元素时与另个一元素碰撞检测</title>

  • 原生JS实现拖拽效果

    原生JS实现拖拽效果

    本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 想要让整个元素移动需要三个事件: 鼠标按下 onmousedown 鼠标移动 onmousemove 鼠标抬起 onmouseup html <div id="login" class="login"> <!-- 点击title拖拽 --> <div id="title" class="login-title">登录会

  • js 实现拖拽排序详情

    目录 1.前言 2.实现 3.为何不使用HTML拖放API实现? 4.总结 1.前言 拖拽排序对于小伙伴们来说应该不陌生,平时工作的时候,可能会选择使用类似Sortable.js这样的开源库来实现需求.但在完成需求后,大家有没有没想过拖拽排序是如何实现的呢?我花了点时间研究了一下,今天分享给大家. 2.实现 { margin: 0; padding: 0; box-sizing: border-box; } .grid { display: flex; flex-wrap: wrap; marg

  • Vue实用功能之实现拖拽元素、列表拖拽排序

    目录 Vue实现拖拽元素.列表拖拽排序 组件使用 补充:排序动画 总结 Vue实现拖拽元素.列表拖拽排序 需求:    1.左右两个容器,左边和右边的元素可以拖动互换    2.列表拖拽排序 组件使用 Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件支持移动设备.拖拽和选择文本.智能滚动,可以在不同列表间拖拽.不依赖jQuery为基础,vue2过渡动画兼容.支持撤销操作,总之是一款非常优秀的vue拖拽组件 npm或yarn安装方式 yarn add vuedragg

  • 原生JS实现拖拽图片效果

    原生JS实现拖拽图片效果

    本文实例为大家讲解了JS实现拖拽图片效果的详细代码,分享给大家供大家参考,具体内容如下 javascript event 对象的clientX,offsetX,screenX,pageX的区别: 用html5的drag来实现拖拽有兼容性问题,使用拖拽插件代码又很多,而这个拖拽demo代码少,并且兼容所有浏览器,很值得在项目中使用, css样式如下: #div1{ width: 100px; height: 100px; background-color: #4D4D4D; position: a

  • Android recyclerview实现拖拽排序和侧滑删除

    Recyclerview现在基本已经替代Listview了,RecyclerView也越来越好用了  当我们有实现条目的拖拽排序和侧滑删除时  可以直接时候Recyclerview提供的API就可以直接实现了 先贴上主要代码 private void initveiw() { ArrayList<String> items = new ArrayList<>(Arrays.asList("itme1", "item2", "itme

随机推荐