jQuery UI Sortable：列表隐藏时如何阻止拖拽操作被取消？

这个问题我之前帮好几个开发者解决过，核心在于浏览器拖拽API的一个特性——当拖拽源元素（或者它的父容器）被设置为display: none时，浏览器会立即终止拖拽会话，因为它认为拖拽的起始点已经不存在了。要解决这个问题，关键是保持拖拽源的DOM元素存在性，只是从视觉上隐藏它，直到拖拽操作完成。下面是具体的解决方案和示例：

核心思路 #

不要使用display: none隐藏源列表，改用以下视觉隐藏但保留DOM存在的方式：

• opacity: 0 + pointer-events: none：元素完全不可见，且不响应任何鼠标事件，但仍占据布局空间（也可以配合position: absolute移除布局空间）
• 移出视口：position: absolute; left: -9999px; top: -9999px;：元素不在可视区域，但DOM结构依然存在

这样浏览器会认为拖拽源仍然存在，不会中断拖拽会话。

原生拖拽API示例 #

假设我们有一个源列表#sourceList、热点区域#hotspot和目标列表#targetList：

<ul id="sourceList">
  <li draggable="true" id="item1">项目1</li>
  <li draggable="true" id="item2">项目2</li>
</ul>
<div id="hotspot">拖拽到这里切换列表</div>
<ul id="targetList" style="display: none;"></ul>

对应的JavaScript代码：

const sourceList = document.getElementById('sourceList');
const hotspot = document.getElementById('hotspot');
const targetList = document.getElementById('targetList');

// 拖拽开始时保存数据
sourceList.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', e.target.id);
});

// 鼠标移入热点时切换列表显示状态
hotspot.addEventListener('mouseover', () => {
  // 视觉隐藏源列表，而非销毁布局
  sourceList.style.opacity = '0';
  sourceList.style.pointerEvents = 'none';
  // 显示目标列表
  targetList.style.display = 'block';
});

// 允许目标列表接收拖拽元素
targetList.addEventListener('dragover', (e) => {
  e.preventDefault();
});

// 处理元素放置
targetList.addEventListener('drop', (e) => {
  e.preventDefault();
  const draggedId = e.dataTransfer.getData('text/plain');
  const draggedItem = document.getElementById(draggedId);
  targetList.appendChild(draggedItem);
  
  // 拖拽完成后，可彻底隐藏源列表（如果需要）
  sourceList.style.display = 'none';
});

// 拖拽结束时恢复源列表状态（如果用户取消拖拽）
sourceList.addEventListener('dragend', () => {
  sourceList.style.opacity = '1';
  sourceList.style.pointerEvents = 'auto';
  targetList.style.display = 'none';
});

SortableJS库适配方案 #

如果你用的是SortableJS这类拖拽库，思路类似，只需要确保源列表的Sortable实例不被销毁，仅视觉隐藏：

const sourceList = document.getElementById('sourceList');
const targetList = document.getElementById('targetList');
const hotspot = document.getElementById('hotspot');

// 初始化源列表Sortable
const sourceSortable = new Sortable(sourceList, {
  group: 'shared',
  animation: 150,
  dragStart: (evt) => {
    // 记录当前拖拽元素
    window.currentDraggedItem = evt.item;
  }
});

// 热点切换逻辑
hotspot.addEventListener('mouseover', () => {
  // 视觉隐藏源列表
  sourceList.style.opacity = '0';
  sourceList.style.pointerEvents = 'none';
  // 显示并初始化目标列表Sortable（仅首次）
  targetList.style.display = 'block';
  if (!window.targetSortable) {
    window.targetSortable = new Sortable(targetList, {
      group: 'shared',
      animation: 150
    });
  }
});

// 拖拽完成后处理
targetList.addEventListener('drop', () => {
  sourceList.style.display = 'none';
});

关键注意点 #

• 绝对避免在拖拽过程中对源列表使用display: none，这会直接触发浏览器的拖拽终止逻辑
• 如果需要完全移除源列表的布局空间，可以在视觉隐藏的同时加上position: absolute; visibility: hidden;（注意visibility: hidden不会中断拖拽，因为元素依然存在于DOM中）
• 拖拽完成（drop）或取消（dragend）后，再根据需求处理源列表的最终状态

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