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 Date自定义函数 延迟脚本执行
Mar 10 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
vue项目实战总结篇
Feb 11 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
element el-input directive数字进行控制
Oct 11 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安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
Javascript window对象详解
2014/11/12 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
Python如何实现动态数组
2019/11/02 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
师范毕业生自我鉴定
2014/01/15 职场文书
秋季红领巾广播稿
2014/01/27 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
会计专业求职信范文
2014/03/16 职场文书
2014年司法所工作总结
2014/11/22 职场文书
广告业务员岗位职责
2015/02/13 职场文书
民间借贷被告代理词
2015/05/23 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle