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读取本地excel文档数据的代码
Nov 11 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 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
php接口数据加密、解密、验证签名
2015/03/12 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
使用console进行性能测试
2015/04/27 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
用C语言实现文件读写操作
2013/10/27 面试题
《维生素c的故事》教学反思
2014/02/18 职场文书
租赁协议书范本
2014/04/22 职场文书
早读课迟到检讨书
2014/09/25 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
Python中的 enumerate和zip详情
2022/05/30 Python