vue-draggable
vue-draggable copied to clipboard
When Dragging Multiple Tiles, DropTarget should only be last Selected Item
Describe the bug As of right now, I'm using Vue-draggable for what is essentially a basic app-homepage (imagine the home screen of any modern mobile device)
At the moment, when you begin dragging, a trash can icon rises up from the bottom right portion of the screen and when you drag apps into it, they go into the trash.
The problem is, if I select multiple tiles, say for example, I start by selecting the tile at the bottom-right of the screen (where the dumpster will then rise up to overlap this tile once i begin dragging), then select the tile at the top-right of the screen:
- Even though at this point, my cursor is at the top-right of the screen, if I begin to drag the tile at the top-right of the screen, but don't move it anywhere, it will dump both tiles into the dumpster at the bottom-right of the screen because the first tile selected does technically overlap it.
To Reproduce Steps to reproduce the behavior:
- Add a 'position: fixed;' dropzone somewhere
- Select multiple tiles, starting close to the dropzone and moving away
- Begin to drag, the tiles towards the fixed dropzone, but do not completely move the mouse-cursor to the dropzone (Such that technically the last selected tile is -NOT- in the dropzone, but some of th eother selected tiles are)
- All the tiles will drop into the dropzone
Expected behavior Only the last selected drag-item should be querying for a nearest sibling to do anything; once additional tiles are selected, it should be as-if only the last tile is selected, and any actions taken (moving, reordering, dropping, changing groups, etc...) should only occur if the last-tile can find a nearest element that is a dropzone/drag-item.
Screenshots If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: Windows 10
- Browser Chrome & Internet Explorer
Additional context This would probably make multiple-dragging much more accurate overall.
Hi @piboistudios, May you provide CodeSandbox example implementing this behaviour? It will be easier to understand and test issue correctly. Thanks