Dragula与Angular 5：通过拖拽更新对象的location属性值

嘿，这个需求其实挺常见的，我来给你拆解一下具体的实现步骤，应该能帮你解决问题～

核心思路 #

我们需要利用HTML5的拖拽API，结合自定义数据属性来实现：

• 给每个容器div标记对应的location值
• 监听拖拽的开始、放置事件，在放置时获取目标容器的location并更新Item的属性

具体实现步骤 #

1. 给容器和Item添加标记
   首先给每个分类div加上data-location属性，用来存储它对应的location值，同时把Item设置为可拖拽：

<div class="container-div" data-location="misc">
  <div class="item" id="item1">Misc Item 1</div>
</div>
<div class="container-div" data-location="armor">
  <div class="item" id="item2">Armor Item 1</div>
</div>

2. 监听拖拽开始事件
   给每个Item绑定dragstart事件，把Item的唯一标识（比如id）存入拖拽数据传输对象，方便后续获取：

document.querySelectorAll('.item').forEach(item => {
  item.draggable = true;
  item.addEventListener('dragstart', (e) => {
    // 存储Item的id，方便后续找到对应的元素
    e.dataTransfer.setData('text/plain', e.target.id);
    // 加个拖拽时的视觉反馈，比如改变透明度
    e.target.style.opacity = '0.5';
  });

  // 拖拽结束后恢复视觉效果
  item.addEventListener('dragend', (e) => {
    e.target.style.opacity = '1';
  });
});

3. 监听容器的放置事件
   给每个分类div绑定dragover和drop事件，处理Item的放置逻辑：

document.querySelectorAll('.container-div').forEach(container => {
  // 阻止默认行为，允许Item被放置到容器内
  container.addEventListener('dragover', (e) => {
    e.preventDefault();
    // 加个放置时的视觉反馈，比如高亮容器
    container.style.border = '2px dashed #ccc';
  });

  // 离开容器时取消视觉反馈
  container.addEventListener('dragleave', () => {
    container.style.border = 'none';
  });

  // 处理放置动作
  container.addEventListener('drop', (e) => {
    e.preventDefault();
    container.style.border = 'none';

    // 获取拖拽的Item的id
    const itemId = e.dataTransfer.getData('text/plain');
    const draggedItem = document.getElementById(itemId);

    // 获取目标容器对应的location值
    const targetLocation = container.dataset.location;

    // 关键：更新Item的location属性
    // 如果你的Item是DOM元素的自定义属性：
    draggedItem.location = targetLocation;
    // 如果你的Item是来自数据源的对象（比如数组里的item对象）：
    // const targetItem = yourItemArray.find(item => item.id === itemId);
    // if (targetItem) targetItem.location = targetLocation;

    // 将Item移动到目标容器中
    container.appendChild(draggedItem);
  });
});

常见问题排查 #

如果你之前的方案没成功，可以检查这几点：

• 有没有在dragover事件里调用e.preventDefault()？这个是触发drop事件的关键
• 有没有正确获取目标容器的location值？比如是不是没加data-location属性，或者取值方式错了
• 是不是只移动了DOM元素，但没同步更新数据源里的Item对象？如果数据是从数组渲染的，一定要同步更新数组，不然刷新页面后会恢复原状

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