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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 Javascript
Javascript之datagrid查询详解
Sep 15 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
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
JQuery中getJSON的使用方法
2010/12/13 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
Python的净值数据接口调用示例分享
2016/03/15 Python
python编写分类决策树的代码
2017/12/21 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
python实现大文本文件分割
2019/07/22 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
中医学专业自荐信范文
2014/04/01 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
七一党日活动总结
2014/07/08 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
苏州园林导游词
2015/02/03 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL