Sortable拖拽功能：添加用户到组时ID校验获undefined问题求助

嘿，我来帮你搞定这个拖拽校验的问题！你遇到的核心问题是遍历组表格获取用户ID时得到undefined，导致无法正确校验用户是否已存在。下面一步步帮你排查和解决：

1. 先确认DOM结构的正确性 #

首先要确保用户列表和组列表的每一项都正确存储了用户ID，推荐用HTML自定义属性data-user-id来存储，这是最可靠的方式。比如你的DOM结构应该类似这样：

<div class="userContainer">
  <div id="userDiv">
    <ul class="userList dragable">
      <!-- 每个用户项都要有data-user-id属性 -->
      <li data-user-id="101">张三</li>
      <li data-user-id="102">李四</li>
    </ul>
  </div>
  <!-- 组表格的结构示例 -->
  <div id="groupDiv">
    <ul class="groupList sortable">
      <!-- 已有用户也要带data-user-id -->
      <li data-user-id="101">张三（已在组内）</li>
    </ul>
  </div>
</div>

如果你的DOM里没有这类存储ID的属性，或者ID存在于子元素（比如<li><span class="id">101</span>张三</li>），那直接遍历父元素肯定拿不到ID，自然会返回undefined。

2. 修正遍历组表格的代码逻辑 #

你之前遍历得到undefined，很大概率是获取ID的方式不对。比如如果用了data-user-id属性，要通过dataset.userId来获取，而不是直接用item.id（id属性是元素自身的ID，不是用户业务ID）。

举个正确的遍历示例：

// 获取组表格里所有已存在的用户ID
function getExistingGroupUserIds() {
  const groupItems = document.querySelectorAll('.groupList li');
  return Array.from(groupItems).map(item => {
    // 从data属性中取用户ID
    const userId = item.dataset.userId;
    // 确保ID是字符串类型，避免类型匹配问题
    return userId ? userId.trim() : null;
  }).filter(id => id !== null); // 过滤掉无效的ID
}

3. 结合Sortable事件完成拖拽校验 #

在Sortable的onAdd事件里做校验是最佳时机，因为这个事件会在元素被拖入目标容器时触发。如果发现用户已存在，要撤销拖拽操作并提示错误：

// 初始化组表格的Sortable
const groupSortable = new Sortable(document.querySelector('.groupList'), {
  group: {
    name: 'user-group', // 要和用户列表的group.name一致
    pull: false, // 组表格不允许往外拖
    put: true // 允许从用户列表拖入
  },
  onAdd: function(evt) {
    // 获取被拖拽的用户项及其ID
    const draggedItem = evt.item;
    const draggedUserId = draggedItem.dataset.userId;

    if (!draggedUserId) {
      alert('用户ID不存在，请检查DOM结构！');
      evt.to.removeChild(draggedItem);
      return;
    }

    // 获取组内已有的所有用户ID
    const existingIds = getExistingGroupUserIds();

    // 校验ID是否存在
    if (existingIds.includes(draggedUserId)) {
      // 撤销拖拽：把元素放回原容器
      evt.from.appendChild(draggedItem);
      alert('该用户已在组内，不能重复添加！');
    }
  }
});

// 初始化用户列表的Sortable
const userSortable = new Sortable(document.querySelector('.userList'), {
  group: {
    name: 'user-group', // 和组表格的group.name一致
    pull: true, // 允许往外拖
    put: false // 不允许拖入
  }
});

4. 常见坑点排查 #

• DOM加载顺序：确保你的JS代码是在DOM加载完成后执行的，比如放在DOMContentLoaded事件里：

  document.addEventListener('DOMContentLoaded', function() {
    // 在这里初始化Sortable和校验逻辑
  });
  

• 选择器错误：检查你获取组表格的选择器是否正确，比如是不是误写了.userList而不是.groupList？
• ID类型不一致：比如用户ID是数字类型，但存储时是字符串，校验时要统一类型（比如都转成字符串），避免101和"101"不匹配的问题。

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