I'm using the draggable and droppable from jqueryui to fill a slideshow with pictures from a list kinda like an editor.Everything is inside a flexbox that is expanding over the whole page.
Everything works almost perfectly the way I intented it, but theres one circumstance when the drag&drop out of the slideshow acts strange. After switching the slideshow slot I can't drag&drop the img out of it to the left anymore, but weird enough I can drag&drop it on the right. It only seems to happen in some occasions, when the flex boxes are aligned different.
<div class="flex-parent">
<div class="slideshow-container flex-child">
<div class="slideshow-box">
<div>
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<br>
<div id="dots" style="text-align:center">
</div>
</div>
<div id="imagesContainer" class="flex-child">
<img src="https://via.placeholder.com/200x100" alt="" width="200" height="100">
<img src="https://via.placeholder.com/200x100" alt="" width="200" height="100">
</div>
</div>
fiddle: https://jsfiddle.net/kilroy_2/cjs4mp96/2/
If anyone could tell me why this is happening, is it a bug inside jqueryui or a strange behavior because the slideshow items occupy the space even though they're hidden? Is it a flexbox problem?
Answering this by myself.
I found a fellow member @kiwhen who seems to be having the problem that was happening for me too and is describing it almost perfectly. As described here: JQuery UI Draggable with hidden Droppable.
When a hidden droppable container is sliding to open, it will push other containers down on the page - or at least, that is what I see. However, when I continue to drag my elements around, it is like some kind of "ghost" is left behind by the droppable containers that were moved down. When I move my draggable element into the spot where one of these "pushed" containers used to be.
In short: Droppables who get hidden are leaving a "ghost" where they used to be.
Answer: To fix this in my situation I simply destroyed the slideshow droppables whenever I switch slides (when they get hidden). And reinitialize only the dropabble slide that is visible.