如何为jQuery UI拖拽分类列表添加初始位置重置功能？

首先咱们来分析下你之前尝试的方法为什么没生效：

• 使用$("#fruits2").remove();其实是把整个fruits2容器删掉了，而不是清空里面的列表项，后续再操作这个容器自然就找不到目标了；
• $("#source li").css({"left":"","top":""});只对拖拽后改变了位置的原元素生效，但你的代码里用了helper: 'clone'，拖拽时移动的是克隆出来的临时元素，原元素其实一直留在source里，所以这个方法起不到恢复目标区域的作用。

下面给你两种适配不同需求的可行解决方案：

方案一：基于现有克隆逻辑的重置（保留原source列表） #

如果你希望保持当前的克隆拖拽逻辑（即拖拽时复制元素到目标区域，原source始终保留所有初始项），那重置只需要清空两个目标容器的内容即可：

步骤1：添加重置按钮到HTML #

在页面任意合适位置加入按钮：

<button id="reset-btn">重置列表</button>

步骤2：编写重置逻辑 #

在你的$(document).ready()函数里添加以下代码：

$("#reset-btn").click(function() {
  // 清空水果和蔬菜目标容器里的所有列表项
  $("#fruits2, #vegetables2").empty();
});

方案二：移动原元素的重置（将所有项移回source） #

如果你实际需求是移动原元素（拖拽后原元素从source消失，进入目标区域），那需要先调整拖拽逻辑，再实现重置：

步骤1：调整拖拽与放置的JS代码 #

移除helper: 'clone'，确保拖拽的是原元素：

$(document).ready(function (){
  // 拖拽原元素，移除克隆配置
  $("#source li").draggable({ revert: 'invalid' });
  
  $("#fruits1").droppable({ 
    accept: 'li[data-value="fruit"]', 
    drop: function (event, ui){ 
      $("#fruits2").append(ui.draggable); 
    } 
  });
  
  $("#vegetables1").droppable({ 
    accept: 'li[data-value="vegetable"]', 
    drop: function (event, ui){ 
      $("#vegetables2").append(ui.draggable); 
    } 
  });

  // 重置按钮逻辑
  $("#reset-btn").click(function() {
    // 把目标容器里的所有列表项移回source
    $("#fruits2 li, #vegetables2 li").appendTo("#source");
    // 可选：恢复初始排序（按字母顺序示例）
    $("#source li").sort(function(a, b) {
      const textA = $(a).text().toUpperCase();
      const textB = $(b).text().toUpperCase();
      return textA.localeCompare(textB);
    }).appendTo("#source");
  });
});

步骤2：添加重置按钮到HTML #

同样加入重置按钮：

<button id="reset-btn">重置列表</button>

进阶方案：严格恢复初始状态 #

如果你需要完全恢复到页面加载时的初始顺序与状态，可以提前保存source的初始HTML，重置时直接还原：

$(document).ready(function (){
  // 保存初始source的HTML内容
  const initialSourceHTML = $("#source").html();

  // ... 你的拖拽和放置代码 ...

  $("#reset-btn").click(function() {
    // 清空目标容器
    $("#fruits2, #vegetables2").empty();
    // 恢复source的初始内容
    $("#source").html(initialSourceHTML);
    // 重新绑定拖拽事件（新恢复的元素需要重新初始化）
    $("#source li").draggable({ revert: 'invalid' });
  });
});

这样不管是克隆还是移动元素，都能准确恢复到最开始的状态啦～

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