jQuery的可拖動遏制的問題，無法拖動元素的父DIV

我有一個非常簡單的圖像管理器，像這樣外：jQuery的可拖動遏制的問題，無法拖動元素的父DIV

<div id="container"> 

    <div id="draggable-images"> 
     <img class="images" src="image1.jpg" /> 
     <img class="images" src="image2.jpg" /> 
     <img class="images" src="image3.jpg" /> 
    </div> 

    <div id="droppable-area> 
    </div> 

</div>

和jQuery去用它：

 $(".images").draggable({ containment: "#container" }); 
     $("#droppable-area").droppable();

這是CSS：

#draggable-images { 
    overflow:scroll; 
    overflow-x:hidden; 
} 

.images { 
    z-index:10000; 
}

圖像是可拖動的，但它們不會從他們的父div中出來，不管它是什麼遏制（甚至試圖將其設置爲窗口）。

有誰知道如何使它工作，或爲什麼它不工作？

我已經設置z-index爲高，以確保這不是問題。我也試圖讓#draggable-images div沒有滾動條，它也沒有工作。

似乎工作像一個魅力jQuery's site，無法找出我失蹤的東西。

來源

2012-03-07 CodeVirtuoso

檢查你的HTML，什麼是錯的吧
取出溢風格父
的z-index的？需要？

http://jsfiddle.net/LRj9T/1/

來源

2012-03-08 00:00:17 Joseph

謝謝。但我需要父div有滾動條 - 或者是根本不可能？ – CodeVirtuoso 2012-03-08 00:16:19

滾動條意味着你有一個約束容器（定義寬度和高度，溢出滾動），這意味着無論在超出的框中，滾動被激活（並且內容不能逃脫父項）。一個解決方法是，當你開始滾動時，你拖動時將元素從容器中取出。 – Joseph 2012-03-08 00:35:52

$('images').draggable({ appendTo: 'body' });

來源

2012-12-20 22:40:00 printminion

這應該是答案。在父div上擁有滾動條可能是設計需求，不應被視爲解決問題的第一個選項。 – Dorival 2015-06-17 14:52:49

我不認爲這是正確的。 [jquery docs]（http://api.jqueryui.com/draggable/#option-appendTo）建議*「appendTo選項僅在輔助選項設置爲不使用原始元素時起作用。」*。在這種情況下沒有克隆。 – maxheld 2017-06-13 21:08:27

這適用於'clone' helper以及knockoutjs上下文項目。請注意，克隆*的風格可能與原始元素的風格不同。 – PeterM 2018-02-27 19:30:48

從#draggable-images刪除overflow-x:hidden。我也面臨類似的問題。

來源

2013-10-01 09:15:24

jQuery的可拖動遏制的問題，無法拖動元素的父DIV

回答

相關問題