search

SortableJS / Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
https://sortablejs.github.io/Sortable/
MIT License
29.29k stars 3.69k forks source link

Dragging into some empty spaces doesn't re-order or move the element when it seems like it should #707

Closed nathanielw closed 8 years ago

nathanielw commented 8 years ago

Not sure how exactly to describe this issue, so here's a demo: http://jsbin.com/kodedayizu/edit?html,css,js,output

To reproduce: Drag one of the items from the top group into the bottom group, making sure that the cursor, once in the bottom group, only goes within the 50-or-so pixels immediately to the right of D.

Expected behaviour: When released, the element being dragged should be moved to the position after the D element (i.e. right where it was dragged to)

Actual behaviour: Releasing the cursor causes the element to remain in the top group. Dragging the item further right (so it is beyond the area it would drop into) or further left (so it is over the previous item in the group) is required to get the expected behaviour.

Here are a couple of screenshots (sorry about the lack of cursor, it doesn't seem to show in screenshots in ChromeOS. I'm dragging the B item).

Dragging to where I'd expect would trigger a move: Dragging to where I'd expect would trigger a move

Dragging further horizontally to actually trigger a move: Dragging further horizontally to actually trigger a move

213 might be related, but there was no example or solution given for that, so I'm not sure.

RubaXa commented 8 years ago

http://recordit.co/p1GRWtsrlu — this confuses you?

nathanielw commented 8 years ago

Yeah, I expected that the entire container would be a target for the drops. It seems particularly counter-intuitive that the space where the item would end up is the space that doesn't trigger a move. Here's a gif showing what I'm talking about: dragging

RubaXa commented 8 years ago

Try dev-branch.

nathanielw commented 8 years ago

Great, it seems to be fixed. Thanks :smiley:

mrodrig commented 5 years ago

I'm seeing this exact same issue using vuedraggable, which is pulling in sortablejs@^1.7.0. Has there been a release that fixes this issue since 1.7.0 or is there something that vuedraggable should be specifying in order to fix this unexpected behavior?

Update: This appears to be broken again as of 1.8.0. I tested with 1.7.0 and it works perfectly.

mrodrig commented 5 years ago

Looked into this more and it appears that the 1.8.0 release caused this to stop working again. It was working in 1.7.0 though. Looks like #1439 is open for this, so hopefully it will be resolved quickly.

owen-m1 commented 5 years ago

@mrodrig It does indeed work, but it seems to be a failure of _detectDirection. You can specify the direction option as either vertical or horizontal (depending on your list) to solve this. Setting direction: 'horizontal' in the JSBin given by OP allows it to work as intended.

https://jsbin.com/nomulom/1/edit?html,css,js,output

mrodrig commented 5 years ago

@owen-m1 Ah, interesting. I've been running into this/testing via vuedraggable using a vertical direction for most drag-and-drop actions, so that's probably why. Setting horizontal definitely helps, but it's still not quite 100% since it requires the user to move the tag to an area that lines up horizontally with a current item, which might not always be the case. https://jsbin.com/hiloleyuvo/2/edit?html,css,js,output

2019-02-07 19 47 48

owen-m1 commented 5 years ago

@mrodrig Yes, this is not optimal. I have been working on a solution. Please read my comment on the open issue.

ivanatreblle commented 1 year ago

I have the same issue with version 1.15.0 Items are blocks of various widths. I cant move a small block to an empty space after a bigger block unless i target the bigger block with the pointer.