9个带cell类的DIV元素拖动功能失效求助

看起来你是在实现9个cell元素的拖动功能，之前能工作但改了样式后突然失效了，我帮你梳理下代码里的几个关键问题，这些应该就是导致功能挂掉的核心原因：

问题排查与修复点 #

1. CSS类选择器写错了
   你CSS里写的cell {是错误的，类选择器必须以.开头，应该改成.cell {。如果没有这个点，你的position: absolute等核心样式根本不会应用到cell元素上——没有绝对定位的话，拖动依赖的transform属性完全起不了作用，这很可能是你改颜色时不小心弄掉的，是导致功能失效的头号元凶！

2. 无效的DOM选择器代码
   开头那段用document.getElementById("cell*")的代码完全不生效，getElementById不支持通配符语法，而且你要选择的是class为cell的元素，这部分代码不仅没用，还会在控制台抛出错误，干扰其他逻辑，建议直接删掉。

3. 未定义的变量导致逻辑中断
   在PyramidCell类的dragStart方法里，你用到了draggable变量，但这个变量从来没被定义过，if (draggable === this.element)这行判断会直接报错，导致拖动逻辑根本启动不了。其实你不需要这个判断，因为所有cell都是要拖动的，直接标记当前实例为拖动状态就行。

4. 冗余且错误的事件监听代码
   中间那段用getElementsByClassName添加dragstart监听的代码也是无效的，draggable变量未定义，而且你已经用类实现了完整的拖动逻辑，这部分完全多余，删掉就好。

修正后的完整代码 #

HTML（示例，可扩展其他cell）

<div id="cell1" class="cell" data-content="mgmt"></div>
<div id="cell2" class="cell" data-content="other"></div>
<!-- 剩余7个cell按此格式添加即可 -->

CSS

:root {
  --cell-size: 100px; /* 定义变量，避免var(--cell-size)无效 */
}

/* 修复类选择器，添加. */
.cell {
  position: absolute;
  width: var(--cell-size);
  height: var(--cell-size);
  border-radius: 0px;
  overflow: auto;
  cursor: move;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
  overflow-x: scroll;
  overflow-y: scroll;
  transition: all 0.3s ease;
  z-index: 1;
  background: #eee; /* 加个默认背景方便看到元素 */
}

.cell.dragging {
  border-radius: 24%;
  z-index: 1000;
}

JavaScript

class PyramidCell {
  constructor(element) {
    this.element = element;
    this.isDragging = false;
    this.currentX = 0;
    this.currentY = 0;
    this.initialX = 0;
    this.initialY = 0;
    this.xOffset = 0;
    this.yOffset = 0;

    this.setupEventListeners();
  }

  setupEventListeners() {
    this.element.addEventListener('mousedown', (e) => this.dragStart(e));
    document.addEventListener('mousemove', (e) => this.drag(e));
    document.addEventListener('mouseup', () => this.dragEnd());
  }

  dragStart(e) {
    // 删掉未定义的draggable判断，直接标记拖动状态
    this.initialX = e.clientX - this.xOffset;
    this.initialY = e.clientY - this.yOffset;

    this.isDragging = true;
    this.element.classList.add('dragging');
  }

  drag(e) {
    if (this.isDragging) {
      e.preventDefault();
      this.currentX = e.clientX - this.initialX;
      this.currentY = e.clientY - this.initialY;
      this.xOffset = this.currentX;
      this.yOffset = this.currentY;

      this.setTranslate(this.currentX, this.currentY);
    }
  }

  dragEnd() {
    this.initialX = this.currentX;
    this.initialY = this.currentY;
    this.isDragging = false;
    this.element.classList.remove('dragging');
  }

  setTranslate(xPos, yPos) {
    this.element.style.transform = `translate(${xPos}px, ${yPos}px)`;
  }
}

// 初始化所有cell元素
document.querySelectorAll('.cell').forEach((cell) => {
  new PyramidCell(cell);
});

替换成这些代码后，所有cell应该就能正常拖动了。另外我补充了--cell-size的变量定义，避免你CSS里的变量引用无效，如果之前你已经在其他地方定义过这个变量，可以忽略这部分。

备注：内容来源于stack exchange，提问作者Brian Stahl