使用 Draggable 时如何在一个容器下同时具有可排序和可交换？

如何解决使用 Draggable 时如何在一个容器下同时具有可排序和可交换？

我正在尝试使用 Shopify 中的 draggable 来构建一个拖放模块，其中某些元素可以排序，但其他元素可以交换（它们是兄弟元素）。但好像我一次只能做一项工作，但不能同时做。

const container = document.querySelectorAll('.wrapper .BoxUnit')

const swappable = new Draggable.Swappable(container,{
    draggable: '.divide',});

const sortable = new Draggable.sortable(container,{
    draggable: '.Box',});

我必须注释掉其中之一的可交换或可排序。有什么想法吗？

jsfiddle 链接在这里： https://jsfiddle.net/cacti_coding/pnsyedLr/72/