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

我正在使用 jqueryui 中的draggable 和droppable 來用串列中的圖片填充幻燈片，有點像編輯器。一切都在一個flexbox 內，它在整個頁面上展開。

一切都按照我的意圖幾乎完美地作業，但是在一種情況下，幻燈片的拖放行為很奇怪。切換幻燈片插槽后，我無法再將 img 拖放到左側，但奇怪的是我可以將其拖放到右側。它似乎只在某些情況下發生，當彈性框對齊不同時。這是一個 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>

這是一個小提琴：https : //jsfiddle.net/kilroy_2/cjs4mp96/2/

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

uj5u.com熱心網友回復：

這個我自己回答。

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

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

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

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

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

標籤：javascript 查询 jquery-ui 可拖动可丢弃的

上一篇：在Web應用程式中獲取默認貨幣

下一篇：實作縮放懸停插件時出現Jquery語法錯誤