如何通过编程实现jQuery拖拽克隆并放入指定分组？

当然可以实现这个需求啦！你已经用到了Sortable.js，只需要调整下配置再加点逻辑，就能借助元素的ID、类名或者文本内容来精准完成克隆拖拽到指定分组的操作～

1. 调整Sortable配置，实现跨组克隆拖拽 #

首先，你当前的Widgets组配置里put: false是禁止其他组拖入，这个没问题，但需要给目标分组（分组1、2、3等）配置对应的Sortable实例，让它们能接收Widgets组的克隆元素：

Widgets组的配置（保留克隆逻辑）

// 初始化Widgets组的拖拽
new Sortable($('#widgets-1')[0], {
  group: {
    name: 'letters', // 分组名称要和目标组一致
    put: false, // 禁止其他组元素拖入Widgets
    pull: 'clone', // 拖拽时生成元素克隆体
  },
  setData: function(dataTransfer, element) {
    // 传递元素的文本、ID、类名，方便后续判断
    dataTransfer.setData('text', element.textContent.trim());
    dataTransfer.setData('elementId', element.id);
    dataTransfer.setData('elementClass', element.className);
  },
  sort: false // 禁止Widgets组内元素排序
});

目标分组的配置（支持接收克隆元素）

不管是预先存在的分组1，还是点击加号生成的分组2、3、4，都需要给它们加上Sortable配置：

// 处理预先存在的分组1
new Sortable($('#group-1')[0], {
  group: {
    name: 'letters', // 和Widgets组名称一致，才能接收元素
    put: true, // 允许接收克隆的元素
    pull: false // 禁止从该分组拖出元素（按需调整）
  },
  onAdd: function(evt) {
    // 这里可以根据元素的ID、类名或文本做校验/自定义操作
    const draggedItem = evt.item;
    const itemId = draggedItem.id;
    const itemText = draggedItem.textContent.trim();

    // 示例1：只允许ID为"special-widget"的元素放入
    if (itemId !== 'special-widget') {
      evt.to.removeChild(draggedItem);
      alert('该组件不允许放入此分组哦');
    }

    // 示例2：根据文本内容设置样式
    if (itemText === '统计组件') {
      draggedItem.style.backgroundColor = '#f0f8ff';
    }
  }
});

2. 处理点击加号生成的动态分组 #

如果是点击加号按钮创建新分组，记得在创建容器后立即初始化Sortable，否则新分组无法接收拖拽元素：

// 加号按钮的点击事件逻辑
$('.add-group-btn').on('click', function() {
  const groupNum = $('.target-group').length + 1;
  // 创建新分组容器
  const newGroup = $(`<div id="group-${groupNum}" class="target-group">分组${groupNum}</div>`);
  $('#groups-wrapper').append(newGroup);

  // 给新分组初始化Sortable
  new Sortable(newGroup[0], {
    group: {
      name: 'letters',
      put: true,
      pull: false
    },
    onAdd: function(evt) {
      // 复用之前的校验逻辑，或者自定义新逻辑
      const draggedItem = evt.item;
      // ... 这里可以添加你需要的判断操作
    }
  });
});

核心注意点 #

• 所有参与拖拽的容器，group.name必须保持一致，这样Sortable才能识别它们属于同一拖拽组。
• 通过setData可以传递元素的标识信息，在onAdd回调里就能精准判断元素是否允许放入，或者执行自定义操作。
• 动态生成的分组一定要事后初始化Sortable，否则无法响应拖拽事件。

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