Dragula / Angular: как разрешить перетаскивание элементов в любом месте контейнера?

Я разрабатываю веб-приложение на Angular с dragula, включенным в мой проект. Он отлично работает для перетаскивания вещей в «сумке», но мне нужна более надежная функция перетаскивания.

Есть ли способ разрешить <div>, который содержит перетаскиваемые элементы, позволить этим элементам быть сброшенными в любом месте контейнера? Может быть, даже позволяя ставить их друг на друга?

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

Скажем, размер div контейнера составляет 500x500 пикселей, а размер внутренних div - 50x50 пикселей. Я хочу иметь возможность перетащить один в левый верхний угол контейнера, а другой - в правый нижний. Я попытался определить ширину div, безрезультатно меняя элементы в сумке.

Я также рассмотрю другие Angular-совместимые фреймворки как варианты.


person Chris    schedule 03.08.2017    source источник
comment
Я также сейчас использую ng2-dragula. Не могли бы вы подробнее рассказать о требованиях   -  person rootkill    schedule 26.08.2017


Ответы (1)


Судя по моему беглому взгляду на исходный код, без модификаций это невозможно.

https://github.com/valor-software/ng2-dragula/tree/master/src/components

На самом деле он не переводит или не меняет какие-либо позиции отброшенных элементов (то есть не меняет значения CSS для 'transform', 'left', 'top' или чего-либо еще). Он просто меняет их порядок в DOM, поэтому их результирующие позиции определяются просто порядком элементов в контейнере, который их хранит, и любым стилем в этом контейнере.

person diopside    schedule 26.08.2017