jqueryui 隐藏的 droppables 错误

Question

我正在使用 jqueryui 中的可拖放功能来用列表中的图片填充幻灯片，有点像 editor.Everything 位于在整个页面上扩展的 flexbox 中。

一切都按照我的意图几乎完美地工作，但有一种情况是幻灯片放映的拖放行为很奇怪。切换幻灯片插槽后，我无法再将 img 从其中拖放到左侧，但奇怪的是我可以将其拖放到右侧。它似乎只在某些情况下发生，当弹性框对齐不同时。


         <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>

fiddle: https://jsfiddle.net/kilroy_2/cjs4mp96/2/

如果有人能告诉我为什么会这样，是 jqueryui 中的错误还是奇怪的行为，因为幻灯片项目即使被隐藏也会占用 space？是 flexbox 的问题吗？

Answer 1

我自己回答。

我找到了一位@kiwhen 成员，他似乎也遇到了我遇到的问题，并且几乎完美地描述了它。如此处所述：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.

简而言之：被隐藏的 Droppables 会在他们曾经所在的地方留下一个“幽灵”。

答案：为了在我的情况下解决这个问题，我只是在切换幻灯片时（当它们被隐藏时）销毁幻灯片放映。并仅重新初始化可见的可放置幻灯片。

jqueryui 隐藏的 droppables 错误

jqueryui hidden droppables bug

javascript

jquery

jquery-ui

droppable

draggable