Dragula/Angular: 如何允许可拖动的项目被放置在其容器内的任何位置？

Question

我正在 Angular 中设计一个 Web 应用程序，我的项目中包含 dragula。它适用于在 "bag" 中拖放内容，但我想要更强大的拖放功能。

有没有办法让 <div> 包含可拖动的项目，让这些项目可以放在容器内的任何地方？也许甚至允许它们相互重叠？

<div id="desktop" [dragula]='"first-bag"'>
  <div>
    <h1>test</h1>
  </div>
  <div>
    <h1>test 2</h1>
  </div>
</div>

假设容器 div 是 500x500px，内部 divs 是 50x50px。我希望能够将一个拖到容器的左上角，另一个拖到右下角。我尝试定义 div 宽度，更改包内的元素无济于事。

我也会考虑其他 Angular 兼容的框架作为选项。

Answer 1

从我对源代码的快速浏览来看，不修改是不可能的。

它实际上并没有翻译或更改任何放置元素的位置（即，不更改 'transform' 或 'left' 或 'top' 或任何的 CSS 值那）。它只是重新排列它们在 DOM 中的顺序，因此它们的结果位置仅由容纳它们的容器中的元素顺序以及该容器上的任何样式决定。

Dragula/Angular: How to allow draggable items to be dropped anywhere within its container?