拖拽3x3网格draggable元素时消失/无法移动问题求助

现有代码核心问题 #

1. HTML结构错误：<head>被嵌套在<body>内，导致样式无法正常加载
2. 拖拽元素缺少背景定位：每个.box未设置background-position，无法显示图片的不同分区
3. 拖拽逻辑缺陷：原元素隐藏方式不合理、放置区域未做重复放置校验、拖拽状态未正确重置

修正后的完整代码 #

1. animPage3.html（修复结构+补充背景定位） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../Styles/anim3.css">
</head>
<body>
  <div class="grid-cont">
    <div class="draggable-grid">
      <div class="box" draggable="true" style="background-position: 0% 0%"></div>
      <div class="box" draggable="true" style="background-position: 50% 0%"></div>
      <div class="box" draggable="true" style="background-position: 100% 0%"></div>
      <div class="box" draggable="true" style="background-position: 0% 50%"></div>
      <div class="box" draggable="true" style="background-position: 50% 50%"></div>
      <div class="box" draggable="true" style="background-position: 100% 50%"></div>
      <div class="box" draggable="true" style="background-position: 0% 100%"></div>
      <div class="box" draggable="true" style="background-position: 50% 100%"></div>
      <div class="box" draggable="true" style="background-position: 100% 100%"></div>
    </div>

    <div class="droppable-grid">
      <div class="droppable-box"></div>
      <div class="droppable-box"></div>
      <div class="droppable-box"></div>
      <div class="droppable-box"></div>
      <div class="droppable-box"></div>
      <div class="droppable-box"></div>
      <div class="droppable-box"></div>
      <div class="droppable-box"></div>
      <div class="droppable-box"></div>
    </div>
  </div>

  <script src="../Scripts/anim3.js"></script>
</body>
</html>

2. anim3.css（统一尺寸+交互样式） #

.grid-cont {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px;
  max-width: 650px;
  margin: 0 auto;
}

.draggable-grid, .droppable-grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

.box {
  width: 100px;
  height: 100px;
  background-image: url('../Media/Images/image.jpg');
  background-size: 300% 300%;
  cursor: grab;
  border: 1px solid #ddd;
}

.box:active {
  cursor: grabbing;
}

.droppable-box {
  border: 2px dashed #ccc;
  width: 100px;
  height: 100px;
  transition: border-color 0.2s;
}

.droppable-box.hovered {
  border-color: #2196F3;
  background-color: rgba(33, 150, 243, 0.1);
}

3. anim3.js（修复拖拽逻辑+状态管理） #

const draggableBoxes = document.querySelectorAll('.draggable-grid .box');
const droppableBoxes = document.querySelectorAll('.droppable-grid .droppable-box');

let draggedItem = null;

draggableBoxes.forEach(box => {
  box.addEventListener('dragstart', dragStart);
  box.addEventListener('dragend', dragEnd);
});

droppableBoxes.forEach(box => {
  box.addEventListener('dragover', dragOver);
  box.addEventListener('dragenter', dragEnter);
  box.addEventListener('dragleave', dragLeave);
  box.addEventListener('drop', drop);
});

function dragStart(e) {
  draggedItem = this;
  this.style.opacity = '0.5';
  e.dataTransfer.setData('text/plain', ''); // 兼容部分浏览器
}

function dragEnd() {
  draggedItem.style.opacity = '1';
  draggedItem = null;
}

function dragOver(e) {
  e.preventDefault();
}

function dragEnter(e) {
  e.preventDefault();
  this.classList.add('hovered');
}

function dragLeave() {
  this.classList.remove('hovered');
}

function drop() {
  this.classList.remove('hovered');
  // 避免一个放置区域重复添加元素
  if (!this.querySelector('.box')) {
    this.appendChild(draggedItem);
  }
}

核心修复说明 #

• HTML结构：将<head>移至<body>外部，确保资源加载正常；给每个拖拽项设置background-position，拆分图片为9个区块
• CSS优化：统一拖拽/放置区域的宽高，添加拖拽光标状态和放置区域hover反馈
• JS逻辑：
  • 用opacity替代display:none，避免拖拽元素突然消失的视觉问题
  • 添加dragend事件重置拖拽状态，防止内存泄漏
  • 增加放置区域元素校验，避免重复放置
  • 补充dataTransfer数据，提升跨浏览器兼容性

内容的提问来源于stack exchange，提问作者WavePain