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 相关文章推荐
jquery里的正则表达式说明
Aug 03 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
vue计算属性及使用详解
Apr 02 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
Jquery Fade用法详解
Nov 06 jQuery
基于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
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
JS中跳出循环的示例代码
2017/09/14 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
Python中的引用和拷贝浅析
2014/11/22 Python
python多线程方式执行多个bat代码
2016/06/07 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
详解Python 解压缩文件
2019/04/09 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
什么是Python中的匿名函数
2020/06/02 Python
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
暑期实践思想汇报
2014/01/06 职场文书
毕业生自荐信格式
2014/03/07 职场文书
初三学生评语大全
2014/04/24 职场文书
置业顾问岗位职责
2015/02/09 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python