Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue with dragging last item and margin #1119

Closed
sqal opened this issue Jun 2, 2017 · 15 comments
Closed

Issue with dragging last item and margin #1119

sqal opened this issue Jun 2, 2017 · 15 comments

Comments

@sqal
Copy link

sqal commented Jun 2, 2017

Hello guys and let me get straight to the point :) I've run into issue with jumping element when it has a margin and is at the last position in the list.

Please take a look at this exampe - https://jsbin.com/retiqekuha/edit?html,css,js,output

Steps to reproduce

  • Try to move last item up in the list - you can see that the element jumps between the current and the old position
  • Try to move some other item - no jumps
  • Now, remove margin rule from list-group-item and once again try to move last item - also no issue this time

Thank you for the help in resolving the issue

@dfvalero
Copy link

dfvalero commented Aug 9, 2017

Hey! Is anybody taking care of this issue?

@pruik
Copy link

pruik commented Sep 18, 2017

+1
I have the exact same issue

@pruik
Copy link

pruik commented Sep 18, 2017

Removing line 739 seems to fix the issue, but I'm not sure what other implications of this change would be

@AnnikaNissen
Copy link

I do also have this issue when using 1.6.0, 1.6.6 & 1.5.1. Works fine with 1.4.2.
(I didn't test more/over versions)

Would be great if this can be fixed :)!

@pruik
Copy link

pruik commented Sep 19, 2017

I fixed my issue by removing the margin from the draggable items, and replacing it with some other form of styling to create spacing between the items. (Such as a thick transparent border)

@raviqqe
Copy link

raviqqe commented Sep 25, 2017

I also have a problem of sorting the last item in a list but even without any margin using 1.6.0 or 1.5.1. But, it works fine with 1.4.2.

@AnnikaNissen
Copy link

Removing line 739 seems to fix the issue

@pruik Which line in which version did you remove?

@pruik
Copy link

pruik commented Sep 27, 2017

@pruik Which line in which version did you remove?

Oh oops, I used version 1.5.1

if ((el.children.length === 0) || (el.children[0] === ghostEl) ||
(el === evt.target) && (target = _ghostIsLast(el, evt)) <-- This line (and fixing the if-statement)
) {

@avilesasturias
Copy link

avilesasturias commented Feb 1, 2018

Looks like latest version 1.7.0 has this fixed, minimized version however returns an error for me.
Thanks.

@fabien
Copy link

fabien commented Feb 7, 2018

Indeed, this is now fixed: https://jsbin.com/focozegewe/1/edit?html,css,js,output

@kachurun
Copy link

kachurun commented Feb 22, 2018

Not fixed yet, still have this bug with forceFallback mode in version 1.7.0

@wrainbird
Copy link

Can confirm I'm getting the same bug as well.

Have got two exact fiddles, one is running 1.4.2 the other 1.7.0

Try dragging the last item up in both fiddles, you will see the bug occurs in the fiddle running off 1.7.0:

1.4.2:
https://jsfiddle.net/rainerbird/0hnxLq0r/2/

1.7.0:
https://jsfiddle.net/rainerbird/0eyxdj5s/

@poolghost
Copy link

This worked for me.

Change on line 812 (version 1.7.0)

if (!dragEl.contains(el)) 

to

if (!dragEl.contains(el) && el.children.length === 0 || el.children.length === 1)

@beeequeue
Copy link

beeequeue commented Sep 11, 2018

Any updates on this issue? It's still a problem when using the latest version of Vue.Draggable, which uses 1.7.0.

maurice-g added a commit to caplena/Sortable that referenced this issue Sep 14, 2018
@owen-m1 owen-m1 closed this as completed Dec 25, 2018
@owen-m1
Copy link
Member

owen-m1 commented Dec 25, 2018

Solved in latest version

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests