0

I am designing a web app in Angular with dragula included in my project. It works just fine for dragging and dropping things in a "bag", but I want a more robust drag and drop functionality.

Is there a way to allow a <div> that holds draggable items, to let those items be dropped anywhere within the container? Maybe even allowing them to be dropped over top of each other? 

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

Say the container div is 500x500px and the inner divs are 50x50px. I want to be able to drag one to the top left corner of the container and the other to the bottom right. I have tried defining the div widths, changing the elements within the bag to no avail.

I will look at other Angular-compatible frameworks as options too.

Graham
  • 7,431
  • 18
  • 59
  • 84
Chris
  • 1,091
  • 11
  • 32

1 Answers1

1

Judging from my quick peek at the source code, it isn't possible without modification.

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

It's not actually translating or changing any of the positions of dropped elements (i.e, not changing CSS values for 'transform' or 'left' or 'top' or any of that). Its just rearranging their order in the DOM, so their resulting positions are determined just by the order of elements in the container that holds them, and whatever styling is on that container.

diopside
  • 2,981
  • 11
  • 23