Closed nathanielw closed 8 years ago
http://recordit.co/p1GRWtsrlu — this confuses you?
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:
Try dev-branch.
Great, it seems to be fixed. Thanks :smiley:
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.
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.
@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.
@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
@mrodrig Yes, this is not optimal. I have been working on a solution. Please read my comment on the open issue.
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.
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](https://cloud.githubusercontent.com/assets/4693844/12005818/565c079a-ac1d-11e5-94f3-15378f51110c.png)
Dragging further horizontally to actually trigger a move:![Dragging further horizontally to actually trigger a move](https://cloud.githubusercontent.com/assets/4693844/12005831/22e7e982-ac1e-11e5-8cc4-6b655bc93b56.png)
213 might be related, but there was no example or solution given for that, so I'm not sure.