Dragula技术咨询：如何将兼具容器属性的文件夹拖拽至垃圾桶？

Dragula原生支持元素同时具备可拖拽项和容器的属性，你遇到的问题是因为没有配置正确的拖拽规则和容器集合，以下是可行的实现方案：

1. 初始化时包含所有目标容器 #

首先要把所有文件夹和垃圾桶都加入Dragula的容器列表，这样文件夹既可以作为被拖拽的元素，也能作为接收文件的容器；垃圾桶仅作为接收容器。

<!-- 示例DOM结构 -->
<div class="folder">文件夹A</div>
<div class="folder">文件夹B</div>
<div id="trash" class="trash">垃圾桶</div>
<div class="file">文件1</div>
<div class="file">文件2</div>

// 选中所有文件夹和垃圾桶元素
const folders = document.querySelectorAll('.folder');
const trash = document.getElementById('trash');

// 初始化Dragula，将文件夹和垃圾桶都纳入容器范围
const drake = dragula([...folders, trash]);

2. 用accepts选项控制拖拽规则 #

通过accepts函数精确限定拖拽逻辑：

• 文件允许拖入文件夹或垃圾桶
• 文件夹只允许拖入垃圾桶

drake.options.accepts = function(el, target, source, sibling) {
  const isFile = el.classList.contains('file');
  const isFolder = el.classList.contains('folder');
  const isTrashTarget = target.id === 'trash';
  const isFolderTarget = target.classList.contains('folder');

  if (isFile) {
    // 文件可拖到文件夹或垃圾桶
    return isFolderTarget || isTrashTarget;
  }
  if (isFolder) {
    // 文件夹只能拖到垃圾桶
    return isTrashTarget;
  }
  return false;
};

3. 用moves选项避免误拖拽 #

如果文件夹内部会存放文件，需要指定只有顶级的文件和文件夹才能被拖拽，避免误拖文件夹内部的子元素：

drake.options.moves = function(el, source, handle, sibling) {
  // 仅允许标记为file或folder的元素触发拖拽
  return el.classList.contains('file') || el.classList.contains('folder');
};

4. 可选：添加拖拽视觉反馈 #

你可以通过Dragula的内置事件自定义高亮样式，提升交互体验：

drake.on('drag', function(el) {
  if (el.classList.contains('folder')) {
    trash.classList.add('highlight');
  } else if (el.classList.contains('file')) {
    [...folders].forEach(folder => folder.classList.add('highlight'));
    trash.classList.add('highlight');
  }
});

drake.on('drop', function(el) {
  trash.classList.remove('highlight');
  [...folders].forEach(folder => folder.classList.remove('highlight'));
});

drake.on('cancel', function(el) {
  trash.classList.remove('highlight');
  [...folders].forEach(folder => folder.classList.remove('highlight'));
});

这套方案完全基于Dragula原生功能，无需额外插件，即可实现你需要的所有拖拽逻辑。

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