实现可重复拖拽的JavaScript拖放模板，核心需求是拖放过程中不移除源元素，拖放结束后源元素保持原位置，同时在目标区域生成对应的副本元素。这种场景常见于组件搭建、素材添加等交互，下面讲解具体实现逻辑。
核心实现思路
整个拖放流程分为三个核心阶段：拖拽开始、拖拽移动、拖拽结束。需要监听源元素的mousedown事件触发拖拽，监听mousemove事件更新拖拽元素位置，监听mouseup事件完成拖放并生成副本，同时全程不操作源元素的DOM位置，确保源元素不被移除。
需要处理的细节
- 拖拽时创建临时的拖拽副本跟随鼠标移动，避免直接操作源元素影响原有布局
- 计算鼠标在源元素内的偏移量，保证拖拽副本的位置和鼠标相对位置一致
- 拖拽结束时判断鼠标位置是否在目标区域内，是则生成永久副本，否则销毁临时拖拽副本
- 事件监听需要绑定到document上，避免鼠标移动过快脱离源元素导致拖拽中断
完整代码实现
以下是完整的可重复拖拽拖放模板代码，包含源元素区域、目标区域和完整的拖放逻辑：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可重复拖拽拖放模板</title>
<style>
.source-container {
width: 300px;
height: 200px;
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 20px;
}
.source-item {
width: 80px;
height: 40px;
background-color: #409eff;
color: white;
text-align: center;
line-height: 40px;
margin: 10px;
cursor: move;
user-select: none;
}
.target-container {
width: 500px;
height: 300px;
border: 2px dashed #999;
padding: 20px;
}
.drag-copy {
width: 80px;
height: 40px;
background-color: #67c23a;
color: white;
text-align: center;
line-height: 40px;
margin: 10px;
user-select: none;
}
.temp-drag {
position: fixed;
z-index: 999;
opacity: 0.7;
pointer-events: none;
}
</style>
</head>
<body>
<h3>源元素区域（可重复拖拽，不会被移除）</h3>
<div class="source-container" id="sourceContainer">
<div class="source-item">组件1</div>
<div class="source-item">组件2</div>
<div class="source-item">组件3</div>
</div>
<h3>目标拖放区域</h3>
<div class="target-container" id="targetContainer"></div>
<script>
// 获取源容器和目标容器
const sourceContainer = document.getElementById('sourceContainer');
const targetContainer = document.getElementById('targetContainer');
// 临时拖拽元素
let tempDragEl = null;
// 鼠标在源元素内的偏移量
let offsetX = 0;
let offsetY = 0;
// 给所有源元素绑定mousedown事件
document.querySelectorAll('.source-item').forEach(item => {
item.addEventListener('mousedown', startDrag);
});
// 开始拖拽
function startDrag(e) {
// 阻止默认选中文本行为
e.preventDefault();
// 创建临时拖拽副本
tempDragEl = this.cloneNode(true);
tempDragEl.classList.add('temp-drag');
tempDragEl.classList.remove('source-item');
// 计算鼠标在元素内的偏移
const rect = this.getBoundingClientRect();
offsetX = e.clientX - rect.left;
offsetY = e.clientY - rect.top;
// 设置临时元素初始位置
tempDragEl.style.left = (e.clientX - offsetX) + 'px';
tempDragEl.style.top = (e.clientY - offsetY) + 'px';
document.body.appendChild(tempDragEl);
// 绑定全局移动和抬起事件
document.addEventListener('mousemove', onDragMove);
document.addEventListener('mouseup', onDragEnd);
}
// 拖拽移动
function onDragMove(e) {
if (!tempDragEl) return;
// 更新临时元素位置
tempDragEl.style.left = (e.clientX - offsetX) + 'px';
tempDragEl.style.top = (e.clientY - offsetY) + 'px';
}
// 拖拽结束
function onDragEnd(e) {
if (!tempDragEl) return;
// 移除事件监听
document.removeEventListener('mousemove', onDragMove);
document.removeEventListener('mouseup', onDragEnd);
// 判断是否在目标容器内
const targetRect = targetContainer.getBoundingClientRect();
const isInTarget = e.clientX >= targetRect.left &&
e.clientX <= targetRect.right &&
e.clientY >= targetRect.top &&
e.clientY <= targetRect.bottom;
if (isInTarget) {
// 生成永久副本到目标容器
const permanentCopy = tempDragEl.cloneNode(true);
permanentCopy.classList.remove('temp-drag');
permanentCopy.classList.add('drag-copy');
permanentCopy.style.position = 'static';
targetContainer.appendChild(permanentCopy);
}
// 移除临时拖拽元素
document.body.removeChild(tempDragEl);
tempDragEl = null;
}
</script>
</body>
</html>
代码说明
上述代码中，源元素绑定mousedown事件后，会创建一个临时的拖拽副本添加到body中，跟随鼠标移动，全程不会修改源元素的DOM结构，因此源元素不会被移除。当鼠标抬起时，判断位置是否在目标容器内，如果是就将临时副本的样式调整为永久副本，添加到目标容器，否则直接销毁临时副本。
注意：如果需要支持触屏设备，可以将mousedown、mousemove、mouseup事件对应替换为touchstart、touchmove、touchend事件，同时调整坐标获取逻辑即可。
扩展优化方向
- 可以给目标容器添加高亮效果，当拖拽元素进入目标区域时修改边框颜色，提升交互体验
- 可以限制目标区域内副本的数量，或者添加副本的删除功能
- 如果源元素是动态生成的，需要使用事件委托给源容器绑定
mousedown事件，避免新增元素无法拖拽 - 可以调整临时拖拽元素的样式，比如添加阴影、缩放效果，让拖拽反馈更明显
JavaScript拖放功能可重复拖拽不移除源元素DOM操作修改时间：2026-06-14 10:39:37