jQuery UI动态拖拽生成列表后无法移除元素问题

功能现状 #

• 已实现拖拽克隆生成任意数量区块、左侧字段拖入区块的基础功能
• 异常表现：字段拖入右侧区块后无法被移除

原有实现代码 #

HTML 部分 #

<div class="draggable">
  <h2>Structure</h2>
  <div class="structure">
    <div class="item1 block e1" data-class="e1">New block</div>
    <div class="item1 headline e2" data-class="e2">New headline</div>
  </div>

  <h2>Fields</h2>
  <div class="fields item1">
    <div class="item2">Date</div>
    <div class="item2">Time</div>
    <div class="item2">Relation</div>
    <div class="item2">Text</div>
  </div>
</div>

<div class="sortable"></div>

JavaScript 部分 #

$(".structure .item1").draggable({
  connectToSortable: ".sortable",
  helper: "clone",
  stop: function (event, ui) {
    $(".sortable .item1").sortable({
      connectWith: ".sortable .item1"
    });
  }
});

$(".sortable").sortable({
  receive: function (event, ui) {
    var itemClass = $(ui.item).attr("data-class");
    $(".sortable ." + itemClass).css(
      { height: "auto", width: "auto" }
    );
  }
});

$(".fields").sortable({
  connectWith: ".sortable .block",
  items: ".item2"
});

问题产生原因 #

• 拖拽连接为单向配置：左侧字段列表的connectWith仅设置了指向区块，没有配置反向连接规则，字段进入区块后没有合法的拖拽放置出口，无法被拖出。
• 动态生成的区块缺失字段拖拽初始化：通过克隆新插入DOM的区块，仅初始化了结构项本身的排序能力，没有绑定字段拖拽的相关逻辑，字段进入区块后就无法再响应拖拽操作。
• 重复初始化问题：原有逻辑每次拖拽结构项停止时都会给所有.sortable .item1重新初始化sortable，没有判断是否已经初始化过，容易引发拖拽行为异常。

修复方案 #

1. 配置双向拖拽连接：允许字段在左侧字段列表、不同区块之间双向拖动，将字段拖回左侧列表即可实现移除效果
2. 动态生成区块时同步初始化字段接收/拖出能力，新增判断避免重复初始化sortable实例
3. 主画布接收到新插入的区块时，补全区块的字段拖拽配置

修复后的完整JavaScript代码如下：

// 左侧结构项拖拽配置
$(".structure .item1").draggable({
  connectToSortable: ".sortable",
  helper: "clone",
  stop: function (event, ui) {
    // 仅给未初始化的结构项绑定排序能力
    $(".sortable .item1").not(".ui-sortable").sortable({
      connectWith: ".sortable .item1"
    });
    // 仅给未初始化的区块绑定字段拖拽能力
    $(".sortable .block").not(".ui-sortable").sortable({
      connectWith: ".fields, .sortable .block",
      items: ".item2"
    });
  }
});

// 右侧主画布排序配置
$(".sortable").sortable({
  receive: function (event, ui) {
    var itemClass = $(ui.item).attr("data-class");
    $(".sortable ." + itemClass).css({
      height: "auto",
      width: "auto"
    });
    // 新插入的区块如果未初始化，立即绑定字段拖拽能力
    if (ui.item.hasClass("block") && !ui.item.hasClass("ui-sortable")) {
      ui.item.sortable({
        connectWith: ".fields, .sortable .block",
        items: ".item2"
      });
    }
  }
});

// 左侧字段列表配置，开启双向连接
$(".fields").sortable({
  connectWith: ".sortable .block, .fields",
  items: ".item2"
});

修复后支持的字段操作：字段可在多个区块之间拖动排序、可拖回左侧字段列表完成移除、可在左侧字段列表内调整顺序。

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