vue-draggable icon indicating copy to clipboard operation
vue-draggable copied to clipboard

When Dragging Multiple Tiles, DropTarget should only be last Selected Item

Open piboistudios opened this issue 6 years ago • 1 comments

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:

  1. Add a 'position: fixed;' dropzone somewhere
  2. Select multiple tiles, starting close to the dropzone and moving away
  3. 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)
  4. 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.

piboistudios avatar May 08 '19 20:05 piboistudios

Hi @piboistudios, May you provide CodeSandbox example implementing this behaviour? It will be easier to understand and test issue correctly. Thanks

nikolasp avatar May 09 '19 04:05 nikolasp