为何首个draggable类元素拖放时会出现两次放置的异常？

看起来你遇到的问题根源在于拖拽逻辑的重复配置和drop事件中未区分两类拖拽元素的处理逻辑。让我们一步步拆解问题并修复：

问题分析 #

1. 你给.draggable元素设置了helper: 'clone'，意味着拖拽时会生成一个克隆体，但同时在drop事件里又手动执行了draggable.clone().appendTo(droppable)——这就导致了一次拖放操作会添加两个元素：一个是拖拽的helper克隆体，另一个是你手动克隆的原元素副本。
2. 两类拖拽元素的初始化逻辑没有明确区分，.edit_draggable的revert: "true"设置也不符合需求（应该是没放到目标容器时才返回，即revert: "invalid"）。

修复方案 #

我们需要针对两类元素分别配置拖拽规则，并在drop事件里做差异化处理：

1. 修正拖拽初始化逻辑 #

• 对于需要保留原元素的.edit_draggable：使用helper: 'clone'，拖拽时生成克隆体，原元素留在左侧；设置revert: "invalid"，只有当拖放到非目标容器时才返回。
• 对于需要移除原元素的.draggable：不使用helper: 'clone'，直接拖拽原元素；同样设置revert: "invalid"，未放入目标容器时返回原位置。

2. 优化drop事件处理 #

在drop事件中判断当前拖拽的元素类型，分别执行“克隆添加”或“移动元素”的逻辑：

$(function () {
  // 配置：拖拽后移除原元素的元素
  $('.draggable').draggable({ 
    revert: "invalid", 
    stack: "0" 
  });

  // 配置：拖拽后保留原元素的元素
  $('.edit_draggable').draggable({ 
    revert: "invalid", 
    stack: "0",
    helper: 'clone' // 拖拽克隆体，原元素保留
  });

  $('.droppable').droppable({
    accept: ".draggable,.edit_draggable",
    drop: function (event, ui) {
      var $target = $(this);
      var $dragged = ui.draggable;

      // 区分两类拖拽元素
      if ($dragged.hasClass('draggable')) {
        // 处理：拖拽后移除原元素，直接移动原元素到目标容器
        $dragged.appendTo($target);
        // 如果你想保留原位置的li容器结构，可改为克隆后移除原元素：
        // $dragged.clone().appendTo($target);
        // $dragged.remove();
      } else if ($dragged.hasClass('edit_draggable')) {
        // 处理：拖拽后保留原元素，添加克隆体到目标容器
        $dragged.clone().appendTo($target);
      }

      // 给目标容器里的input设置name属性
      $target.find("input").attr("name", "headercols[]");
    }
  });
});

额外说明 #

• 如果你之前的$(this).find("input").remove();是想清空目标容器再添加新元素，那可以保留，但要注意这会移除容器内所有已存在的input，根据你的实际需求调整。
• 确保两类元素的class没有重叠（比如.edit_draggable不要同时拥有.draggable类），避免逻辑冲突。

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