Angular实现点击时在数组间移动元素（附Plunkr示例）

嗨，我来帮你搞定这个小问题！你已经完成了标签迁移的核心逻辑，现在就差把原数组里已经被选中的标签彻底锁死，不让它再被点击对吧？咱们一步步来解决：

核心思路 #

问题的根源是你没有给原数组里的标签添加「已选中」的状态标记，也没阻止它的点击事件。咱们需要：

1. 给每个标签加个状态字段，跟踪它是否已经被移到新数组
2. 用CSS样式标记不可点击状态，同时通过pointer-events: none彻底阻止点击
3. 标签返回原数组时，重置这个状态，恢复可点击性

具体实现步骤（以Vue为例，适配你的Plunkr场景） #

1. 给标签数据添加状态字段 #

首先在原标签数组里给每个标签加个isSelected属性，初始值为false：

data() {
  return {
    originalTags: [
      { id: 1, name: '前端开发', isSelected: false },
      { id: 2, name: 'JavaScript', isSelected: false },
      { id: 3, name: 'Vue.js', isSelected: false },
      // 更多标签...
    ],
    selectedTags: []
  };
}

2. 修改标签点击逻辑，更新状态 #

点击原标签时，先判断是否已选中，没选中的话才迁移，同时把原标签的isSelected设为true：

handleSelectTag(tag) {
  // 只有未选中的标签才能被点击迁移
  if (!tag.isSelected) {
    tag.isSelected = true;
    // 复制对象到选中数组，避免引用导致的状态混乱
    this.selectedTags.push({ ...tag });
  }
}

3. 处理标签返回逻辑，重置状态 #

点击选中的标签返回时，找到原数组对应的标签，把isSelected改回false，同时从选中数组移除：

handleUnselectTag(selectedTag) {
  // 找到原数组中对应的标签
  const originalTag = this.originalTags.find(t => t.id === selectedTag.id);
  if (originalTag) {
    originalTag.isSelected = false;
  }
  // 从选中数组删除该标签
  this.selectedTags = this.selectedTags.filter(t => t.id !== selectedTag.id);
}

4. 模板与CSS配合，实现不可点击效果 #

在模板里根据isSelected状态给标签加不同的类，然后用CSS控制样式和交互：

<!-- 原标签列表 -->
<div class="original-tag-list">
  <span
    v-for="tag in originalTags"
    :key="tag.id"
    :class="['tag', tag.isSelected ? 'tag--disabled' : 'tag--clickable']"
    @click="handleSelectTag(tag)"
  >
    {{ tag.name }}
  </span>
</div>

<!-- 已选中标签列表 -->
<div class="selected-tag-list">
  <span
    v-for="tag in selectedTags"
    :key="tag.id"
    class="tag tag--selected"
    @click="handleUnselectTag(tag)"
  >
    {{ tag.name }}
  </span>
</div>

CSS样式：

.tag {
  padding: 6px 12px;
  margin: 0 6px 8px 0;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.tag--clickable {
  background-color: #1890ff; /* 蓝色标签 */
  color: #fff;
}

.tag--disabled {
  background-color: #e6e6e6;
  color: #999;
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none; /* 关键：彻底阻止点击事件 */
}

.tag--selected {
  background-color: #52c41a; /* 选中后的绿色标签 */
  color: #fff;
}

关键说明 #

• pointer-events: none是核心：它不仅让标签看起来不可点击，还会真正阻止所有鼠标事件，彻底解决原标签还能被点击的问题
• 复制对象到选中数组：避免直接引用原标签对象，防止修改选中标签时意外影响原数组的状态
• 状态驱动UI：通过isSelected状态来控制标签的样式和交互，符合前端开发的状态管理思路

这样修改后，原数组里已经被选中的标签就会变成灰色不可点击状态，再也不会被重复点击啦！

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