jqueryui隐藏的droppables错误答案

【问题标题】：jqueryui hidden droppables bugjqueryui隐藏的droppables错误
【发布时间】：2021-12-08 07:31:26
【问题描述】：

我正在使用 jqueryui 中的可拖放功能来填充幻灯片，其中包含列表中的图片，有点像编辑器。所有内容都在扩展整个页面的弹性框内。

一切都几乎按照我的意图完美运行，但有一种情况是幻灯片中的拖放行为很奇怪。切换幻灯片插槽后，我无法再将 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>

小提琴：https://jsfiddle.net/kilroy_2/cjs4mp96/2/

如果有人能告诉我为什么会发生这种情况，这是 jqueryui 内部的错误还是奇怪的行为，因为幻灯片项目即使隐藏了也会占用空间？是不是 flexbox 的问题？

【问题讨论】：

欢迎来到 Stack Overflow。我认为这个问题与您的accept 有关。您可能还想看看 Sortable 与 Drop，但我还不确定。 JavaScript 和 jQuery 也有很大的混合，如果可能的话，最好使用其中一种而不是混合使用。此外，Droppable 只有在可拖动对象位于放置目标上方时才会触发“放置”。我测试时似乎一切正常：jsfiddle.net/Twisty/68uhraL0/4
这似乎只发生在某些情况下，当弹性框的对齐方式不同时，我不知道为什么，因为弹性父级“droppable”应该可以在页面上的任何位置工作。
我猜有些东西“在”flex-parent 上，所以悬停在 droppable 上并没有发生，而是悬停在另一个不太清楚的目标上。
看起来这家伙也有同样的错误。当可放置对象被隐藏时，Jqueryui 会留下幽灵可放置区域。 stackoverflow.com/questions/30734423/…

标签： javascript jquery jquery-ui draggable droppable

【解决方案1】：

我自己回答这个问题。

我找到了一位成员@kiwhen，他似乎也遇到了发生在我身上的问题，并且几乎完美地描述了它。如此处所述：JQuery UI Draggable with hidden Droppable。

当一个隐藏的可放置容器滑动打开时，它会将其他容器向下推到页面上——或者至少，这是我所看到的。然而，当我继续拖动我的元素时，就像被向下移动的可放置容器留下了某种“幽灵”。当我将可拖动元素移动到这些“推送”容器之一曾经所在的位置时。

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

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

【讨论】：