search

a5hik / ng-sortable

AngularJS Library for Drag and Drop, supports Sortable and Draggable. Supports Touch devices.
http://a5hik.github.io/ng-sortable/
MIT License
1.15k stars 314 forks source link

$helper.offset returns wrong value when using 'containment' #218

Open rcijvat opened 9 years ago

rcijvat commented 9 years ago

Hello there! First of all, this is by far the best drag-drop library I have encountered for Angular, great work! However, I have stumbled upon a small problem with the .as-sortable-dragging item.

See this plunker for an example: http://plnkr.co/edit/u4sSBVDZfbl4caCkf4OT?p=preview This is a fork from the example you guys have on horizontal sortables. The only thing I changed is, I put everything in a div that I positioned absolutely, with some offsets. The $helper.offset function does not detect this and therefore fails to take the offset from parent/grandparent/etc of the containment div into account.

I have had some other problems with the $helper.offset function as well, but those were extremly hard to reproduce. Basically, I had a horizontal sortable list, where every item in the list had a height way taller than the screen. This entire list was wrapped in several containers, all with their own positioning (hence the difficulty reproducing it, outside of these containers it seemed to work fine). Now during dragging, the .as-sortable-dragging item would get a top value of approx. minus the height of the sortable item, which was obviously not correct. Perhaps this problem might be solved by a fix for the above problem as well.

isaaclyman commented 9 years ago

:+1: I am having this problem as well. The containment property tends to put the item I'm dragging around in the wrong place. I'm using several relatively-positioned divs with zero-height divs following each one. The zero-height divs are expandable via CSS transforms; this may be what's causing the detected height to be incorrect.

rdeutsch commented 8 years ago

+1 - I'm having this issue as well. The item being dragged is appearing to the left of the mouse cursor, only when I use the containment property in the options. I believe it might be caused by the combination of using both containerPositioning: 'relative' and containment. In my case, each as-sortable-item is a bootstrap column, and the .as-sortable-dragging item was appearing way off screen to the right until I added the containerPositioning: 'relative' - which fixed that issue (the .as-sortable-dragging item appeared correctly under the mouse). But then when I added containment property, the .as-sortable-dragging item appeared a little way off to the left of the mouse.

Is there an update on this issue?

yinanchuan commented 3 years ago

+1 - I'm having this issue as well. The item being dragged is appearing to the left of the mouse cursor, only when I use the containment property in the options. I believe it might be caused by the combination of using both containerPositioning: 'relative' and containment. In my case, each as-sortable-item is a bootstrap column, and the .as-sortable-dragging item was appearing way off screen to the right until I added the containerPositioning: 'relative' - which fixed that issue (the .as-sortable-dragging item appeared correctly under the mouse). But then when I added containment property, the .as-sortable-dragging item appeared a little way off to the left of the mouse.

Is there an update on this issue?

containerPositioning: 'relative' working for me.