Nestable2 icon indicating copy to clipboard operation
Nestable2 copied to clipboard

Can't drag item to the end of the list right after item with children if use draggable handle

Open RomanBurunkov opened this issue 7 years ago • 8 comments

Considering example from demo page: https://ramonsmit.github.io/Nestable2/

Example for 'Draggable Handles'(the last one).

Expected behavior

Drag should work for any position in the list.

Actual behavior

e.g. I'm not able to drag item14 after item 15 if item 15 expanded.

Steps to reproduce the behavior

  1. Go to https://ramonsmit.github.io/Nestable2/.
  2. Drag item 14.
  3. Try to drop it right after Item 15 to the end of the list.

Tried in latest FF and Chrome. But it works fine if don't use additional draggable handle.

RomanBurunkov avatar Jul 27 '17 14:07 RomanBurunkov

You are right, but I have this some for all examples. The tip is to move item 14 first to item 15 as a children and then put it as a last item. Can you try?

Alt Text

pjona avatar Jul 31 '17 09:07 pjona

Sure, I've found this aproach too, but it looks like just a workaround.

RomanBurunkov avatar Jul 31 '17 10:07 RomanBurunkov

And let's imagine that item14 has children and you have max level of children set to two.

RomanBurunkov avatar Jul 31 '17 10:07 RomanBurunkov

I've meant this situation: { maxDepth : 2 }

nest_spl

And you are not able to drag 51_Pink....right after Barco-s... and there is no workaround which works ;)

RomanBurunkov avatar Jul 31 '17 16:07 RomanBurunkov

I think i found the problem there... In the code of the dragMove function it seeks for the .dd-item under the pointer, might it be that your content completely cover that element? You can test it like i did for myself: try to add a padding to the .dd-item element and see if it still does it, it worked as a quickfix for me in the wait for an official fix.

ekomsctr avatar Oct 24 '17 16:10 ekomsctr

@ekomsctr, thanks you found that. I'm going to check whether this can help me to resolve this issue.

RomanBurunkov avatar Oct 26 '17 17:10 RomanBurunkov

This hint also can fix the issue:

//var before = e.pageY < (this.pointEl.offset().top + this.pointEl.height() / 2);
var before = e.pageY < (this.pointEl.offset().top + this.pointEl.find('div:first-child').height() / 2);

RomanBurunkov avatar Oct 26 '17 18:10 RomanBurunkov

So, in this case, the reason probably is the variable 'before' is always 'true' and we can't place element after the .dd-item node.

May be it is possible to add some conditions to place placeEl to the bottom of the list if we out of the bottom border of the rootlist...

@pjona , What do you think about that?

RomanBurunkov avatar Oct 27 '17 10:10 RomanBurunkov