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 相关文章推荐
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
layui--js控制switch的切换方法
Sep 03 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 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下PHP5和Apache的安装与配置
2006/09/05 PHP
怎么使 Mysql 数据同步
2006/10/09 PHP
第四节--构造函数和析构函数
2006/11/16 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
javascript类型转换示例
2014/04/29 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
vue实现表格数据的增删改查
2017/07/10 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
Python入门之后再看点什么好?
2018/03/05 Python
Python常见工厂函数用法示例
2018/03/21 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
新教师培训方案
2014/06/08 职场文书
2014国庆节标语口号
2014/09/19 职场文书
会计求职信怎么写
2015/03/20 职场文书
男生贾里读书笔记
2015/06/30 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
Django操作cookie的实现
2021/05/26 Python