Jquery Sortable实现任务克隆至多周目标列的技术问询

你的需求是将侧边任务克隆到指定的周日期列，现有通过光标位置判断的方法虽然可行，但确实存在依赖固定像素宽度、响应式场景下易失效的问题。其实可以利用jQuery UI Sortable自带的事件来直接识别当前悬浮的目标容器，这个方法更灵活且易于维护。

改进思路 #

核心是通过over事件记录拖拽元素当前悬浮的目标容器，在remove事件中直接使用这个记录的容器作为appendTo的目标，完全不需要硬写像素范围判断。

优化后的代码 #

function sortable() {
  // 声明变量存储当前悬浮的目标容器
  let targetContainer = null;

  // 侧边任务列的可拖拽配置
  $("#sort1, #sort2, #sort3").sortable({
    connectWith: ".connectedSortable",
    // 当拖拽元素进入目标容器时，记录该容器
    over: function(event, ui) {
      // 只记录sort4-sort10这些周日期列
      const currentContainer = ui.item.closest("#sort4, #sort5, #sort6, #sort7, #sort8, #sort9, #sort10");
      if (currentContainer.length) {
        targetContainer = currentContainer;
      }
    },
    // 当拖拽元素离开容器时，清空记录（避免残留错误目标）
    out: function() {
      targetContainer = null;
    },
    remove: function(event, ui) {
      // 如果有记录的目标容器，就克隆到该容器；否则设置默认处理
      if (targetContainer) {
        ui.item.clone().appendTo(targetContainer);
      } else {
        // 可选：拖拽到容器外时的默认行为，比如克隆到第一个周列
        ui.item.clone().appendTo('#sort4');
      }
      $(this).sortable('cancel');
    }
  }).disableSelection();

  // 周日期列间的拖拽配置
  $("#sort4, #sort5, #sort6, #sort7, #sort8, #sort9, #sort10").sortable({
    connectWith: ".connectedSortable"
  }).disableSelection();
};

方案优势对比 #

• 更灵活：不依赖固定的容器宽度，即使页面是响应式布局（比如容器宽度随屏幕尺寸变化），代码依然能正常工作
• 更准确：直接通过DOM元素识别目标，避免光标位置判断可能出现的误差（比如容器有内边距、边框时的计算偏差）
• 更易维护：不需要修改像素数值，后续新增或调整周列时，只需修改选择器即可

补充说明 #

如果需要支持拖拽到多个列（比如按住Ctrl键同时拖拽到多个列），可以扩展这个思路：通过监听键盘事件记录多选状态，在over事件中收集多个目标容器，最后批量克隆。不过从你的需求描述看，当前的方案已经能满足"克隆到一个或多个"的基础场景，如果需要多选可以再进一步调整。

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