如何禁用表格网格的颜色拖拽功能？已尝试方案无效

我明白你的困扰——之前给网格元素加draggable=false或者在body上绑定阻止拖拽的事件没效果，核心原因是你搞错了拖拽行为的发起源：不是网格元素在被拖拽，而是你选中的颜色色块在被拖拽，这些色块才是拖拽事件的起点。

下面给你几个可行的解决方案：

方案1：直接禁用颜色色块的拖拽属性 #

找到你页面中所有颜色选择的小方块（比如带有.color类的元素），给它们逐个添加draggable="false"属性：

<div class="color" draggable="false" style="background: red;"></div>

如果色块数量多，用JS批量设置更高效：

// 选中所有颜色色块，禁用拖拽
document.querySelectorAll('.color').forEach(colorBlock => {
  colorBlock.draggable = false;
});

方案2：拦截色块的拖拽发起事件 #

如果方案1没生效，可能是页面中有JS主动给色块绑定了拖拽事件，这时候可以用事件委托全局拦截：

// 在捕获阶段拦截dragstart事件，确保优先阻止
document.addEventListener('dragstart', function(e) {
  // 判断触发事件的元素是颜色色块时，阻止拖拽
  if (e.target.classList.contains('color')) {
    e.preventDefault();
    return false;
  }
}, true);

方案3：移除页面中主动绑定的拖拽代码 #

打开你的项目代码，查找是否有类似这样的代码段：

// 类似这样给色块绑定拖拽事件的代码
colorBlock.addEventListener('dragstart', function(e) {
  // 拖拽相关的逻辑
});

如果找到，直接删除这段绑定代码，就能彻底移除色块的拖拽功能。

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