jqueryui droppable drop 事件有时不会触发并且 ui-hover 仍然存在

Question

我正在使用 jqueryui 中的draggable 和 droppable 来用列表中的图片填充幻灯片，有点像编辑器。一切都在一个 flexbox 内，它在整个页面上展开。

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

    <html>
       <body>
         <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">
              <img src="https://via.placeholder.com/200x100" alt="" width="200" height="100">
              <img src="https://via.placeholder.com/200x100" alt="" width="200" height="100">
              <img src="https://via.placeholder.com/200x100" alt="" width="200" height="100">
              <img src="https://via.placeholder.com/200x100" alt="" width="200" height="100">
              <img src="https://via.placeholder.com/200x100" alt="" width="200" height="100">
              <img src="https://via.placeholder.com/200x100" alt="" width="200" height="100">
              <img src="https://via.placeholder.com/200x100" alt="" width="200" height="100">
              <img src="https://via.placeholder.com/200x100" alt="" width="200" height="100">
              <img src="https://via.placeholder.com/200x100" alt="" width="200" height="100">
              <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>
      </body>
    </html>

这是一个小提琴： https : //jsfiddle.net/kilroy_2/cjs4mp96/2/

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

Answer 1

这个我自己回答。

我找到了一个@kiwhen 同事，他似乎也遇到了我也遇到的问题，并且几乎完美地描述了它。 如此处所述： JQuery UI Draggable with hidden Droppable 。

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

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

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

jqueryui droppable drop 事件有时不会触发并且 ui-hover 仍然存在

问题描述

1 个解决方案

解决方案1
0 2021-10-22 22:05:08

jqueryui droppable drop 事件有时不会触发并且 ui-hover 仍然存在

问题描述

1 个解决方案

解决方案1 0 2021-10-22 22:05:08

解决方案1
0 2021-10-22 22:05:08