js實現(xiàn)拖拽元素選擇和刪除
更新時間：2020年08月25日 12:37:46 作者：#麻辣小龍蝦#
這篇文章主要為大家詳細介紹了js實現(xiàn)拖拽元素選擇和刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)拖拽元素選擇和刪除的具體代碼，供大家參考，具體內容如下
我們上網(wǎng)的時候講過一些平臺在選擇一些選項的時候采用拖拽的方式將選項拖入指定位置完成選擇，現(xiàn)在我們就自己來實現(xiàn)一下類似的效果。
結果如下：
代碼如下：
<!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方法拆分字符串時出現(xiàn)一些空字符串""，尤其是當使用正則表達式作為分隔符的時候。那么，產生這些空字符串的原因是什么？又該如何來處理呢，這就是今天我們要探討的問題2014-09-09
本文為大家介紹下js如何獲取IP和PcName在IE下測試，代碼如下，有需要的朋友可以參考下，希望對大家有所幫助2013-08-08
這篇文章主要介紹了JS數(shù)組扁平化(flat)方法總結詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下2019-06-06
下面小編就為大家?guī)硪黄狪nput文本框隨著輸入內容多少自動延伸的實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
JavaScript數(shù)組對象實現(xiàn)增加一個返回隨機元素的方法
這篇文章主要介紹了JavaScript數(shù)組對象實現(xiàn)增加一個返回隨機元素的方法,涉及javascript針對數(shù)組及隨機數(shù)的相關操作技巧,需要的朋友可以參考下2015-07-07
前端JavaScript實現(xiàn)文件壓縮的全面優(yōu)化指南
JavaScript文件大小直接影響網(wǎng)頁加載速度和用戶體驗,本文將詳細介紹從基礎到高級的各種JavaScript壓縮優(yōu)化技術,小伙伴可以根據(jù)需求進行選擇2025-04-04
原生JS實現(xiàn)移動端web輪播圖詳解（結合Tween算法造輪子）
在做移動端開發(fā)的時候，必不可少的是輪播圖，下面這篇文章主要給大家介紹了關于利用純JS實現(xiàn)移動端web輪播圖的相關資料，重要的是結合Tween算法造輪子，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
這篇文章主要介紹了JS+CSS實現(xiàn)閃爍字體效果代碼,可實現(xiàn)文字按照指定顏色逐次閃爍顯示的功能,代碼非常簡單實用,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了手把手15分鐘搭一個企業(yè)級腳手架，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09