Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot drop on empty space in draggable container

See original GitHub issue

I’m having an issue moving an element from one list to another where list items are arranged horizontally and take up either 50% or 100% of the list width:

 __   __
|A | |D |
|BB| |  |
|C | |  |
 __   __

I can’t drop D directly to the right of A without first hovering over A, B, or C.

I made a JSFiddle showing this, and here’s what it looks like in action:

vue-draggable-empty-space-drop

Thanks for sharing this great plugin!

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:7 (3 by maintainers)

Top GitHub Comments

2reactions

David-Desmaisonscommented, Feb 25, 2019

Corrected in version 2.18.0 with dependency on sortable 1.8.3

0reactions

eigudewiecommented, Jul 26, 2022

Hey there. I’m currently building a scheduler-component and facing the same/a similiar issue in 2.24.3

Each row is a draggable-container and my draggable-elements are absolute positioned. As you can see in the video i’m able to drop new elements behind the first element, but not in front. Only when dragging from behind through the existing element. Any idea how to solve that behavior? Or is it even possible to fix?

https://user-images.githubusercontent.com/71465570/180984186-c95457fa-3f36-43f3-8e82-f3c87c3ba066.mov

Thank you for your work.

Top Results From Across the Web

javascript Drag and drop, empty container - Stack Overflow

You assign to the property. container.innerHTML = '';. Also your draggable element is missing an ID, so ev.

Creating a drag and drop area - HubSpot Developers

Developers can specify empty drop zones for drag and drop areas, where content creators build their own page content and layout, or, ...

HTML Drag and Drop - GeeksforGeeks

The ondragover event specifies where the dragged data can be dropped. By default, data/elements cannot be dropped in other elements. To allow a ......

How To Create Drag and Drop Elements with Vanilla ...

In this tutorial, we will build a drag-and-drop example using the HTML ... Our project will consist of a container with two types...

ondrop Event - W3Schools

The ondrop event occurs when a draggable element or text selection is dropped on a valid drop target. Drag and drop is a...