js实现拖拽元素选择和删除
更新时间：2020年08月25日 12:37:46 作者：#麻辣小龙虾#
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了Bootstrap表格使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
使用JavaScript的split方法拆分字符串时出现一些空字符串""，尤其是当使用正则表达式作为分隔符的时候。那么，产生这些空字符串的原因是什么？又该如何来处理呢，这就是今天我们要探讨的问题2014-09-09
本文为大家介绍下js如何获取IP和PcName在IE下测试，代码如下，有需要的朋友可以参考下，希望对大家有所帮助2013-08-08
这篇文章主要介绍了JS数组扁平化(flat)方法总结详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
下面小编就为大家带来一篇Input文本框随着输入内容多少自动延伸的实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了JavaScript数组对象实现增加一个返回随机元素的方法,涉及javascript针对数组及随机数的相关操作技巧,需要的朋友可以参考下2015-07-07
JavaScript文件大小直接影响网页加载速度和用户体验,本文将详细介绍从基础到高级的各种JavaScript压缩优化技术,小伙伴可以根据需求进行选择2025-04-04
原生JS实现移动端web轮播图详解（结合Tween算法造轮子）
在做移动端开发的时候，必不可少的是轮播图，下面这篇文章主要给大家介绍了关于利用纯JS实现移动端web轮播图的相关资料，重要的是结合Tween算法造轮子，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-09-09
这篇文章主要介绍了JS+CSS实现闪烁字体效果代码,可实现文字按照指定颜色逐次闪烁显示的功能,代码非常简单实用,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了手把手15分钟搭一个企业级脚手架，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
最新评论