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


Posted in Javascript onAugust 25, 2020

本文实例为大家分享了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>

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

Javascript 相关文章推荐
工作需要写的一个js拖拽组件
Jul 28 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
十个免费的web前端开发工具详细整理
Sep 18 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
利用 JavaScript 构建命令行应用
Nov 17 Javascript
基于vue实现简易打地鼠游戏
Aug 21 #Javascript
vue实现打地鼠小游戏
Aug 21 #Javascript
js实现滑动进度条效果
Aug 21 #Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 #Javascript
vue组件开发之tab切换组件使用详解
Aug 21 #Javascript
vue组件开发之slider组件使用详解
Aug 21 #Javascript
Vue左滑组件slider使用详解
Aug 21 #Javascript
You might like
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
PHP 日常开发小技巧
2009/09/23 PHP
深入密码加salt原理的分析
2013/06/06 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
phpwind放自动注册方法
2006/12/02 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
python中的编码知识整理汇总
2016/01/26 Python
Python实现八大排序算法
2016/08/13 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
python的常见矩阵运算(小结)
2019/08/07 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
介绍一下Java中的Class类
2015/04/10 面试题
酒店经理职责
2014/01/30 职场文书
七匹狼男装广告词
2014/03/21 职场文书
学雷锋日活动总结
2015/02/06 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS