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. Here's a gif: https://gfycat.com/coldfavoriteatlanticspadefish

         <div class="flex-parent">
            <div class="slideshow-container flex-child">
              <div class="slideshow-box">
                <div>
                </div>
                <a class="prev">&#10094;</a>
                <a class="next">&#10095;</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>

Here's a 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?

CodePudding user response：

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.