jqueryui隱藏的droppables錯誤-有解無憂

我正在使用 jqueryui 中的可拖放和可拖放來填充幻燈片，其中包含串列中的圖片，有點像編輯器。所有內容都在擴展整個頁面的 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>

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

如果有人能告訴我為什么會發生這種情況，它是 jqueryui 內部的錯誤還是奇怪的行為，因為幻燈片專案即使被隱藏也會占用空間？是彈性盒的問題嗎？

uj5u.com熱心網友回復：

這個我自己回答。

我找到了一位成員@kiwhen，他似乎也遇到了我也遇到的問題，并且幾乎完美地描述了它。如此處所述：JQuery UI Draggable with hidden Droppable。

當一個隱藏的可放置容器滑動打開時，它會將其他容器向下推到頁面上——或者至少，這是我所看到的。然而，當我繼續拖動我的元素時，就像被向下移動的可放置容器留下了某種“幽靈”。當我將可拖動元素移動到這些“推送”容器之一曾經所在的位置時。

簡而言之：被隱藏起來的 Droppables 正在他們曾經所在的地方留下一個“幽靈”。

回答：為了在我的情況下解決這個問題，我只是在切換幻燈片時（當它們被隱藏時）銷毀了幻燈片可放置項。并僅重新初始化可見的 dropabble 幻燈片。

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/435197.html

標籤：javascript jQuery jQuery-ui 可拖动的可丢弃

上一篇：使用ui-sortable時使下面的li元素折疊元素

下一篇：RecyclerView和NestedScrollView只占螢屏的一半