容器我this代碼：jQuery的可拖動 - 項目去了在Chrome/Safari瀏覽器

HTML

<div class="draggable_main_container"> 
    <div class="draggable_container"> 
     <div class="draggable"> 
      <div class="minus"> 
       label 
      </div> 
     </div> 
    </div> 
</div>

CSS

.draggable_main_container 
{ 
    width:134px; 
    overflow:auto; 
    position:relative; 
    height:350px; 
} 

.draggable_container 
{ 
    height:300px; 
    position:relative; 
    overflow:visible; 
    background-color:blue; 
} 

.draggable 
{   
    background-color:red; 
    height:134px; 
    width:134px; 
    cursor:pointer; 
    position:relative; 
} 

.draggable .minus 
{ 
    position:absolute; 
    left:50px; 
    bottom:-20px;  
    width:32px; 
    height:20px; 
    background-color:yellow; 
}

jQuery的

$(".draggable").draggable({ 
    axis: "y", 
    containment: 'parent' 
});

現在，在Firefox上沒有問題！在Chrome/Safari上，它在獲取容器底部時會阻止。

然後，如果我點擊並且再次滾動到底部，則div移動到容器上。當它獲得主容器高度（350px）時，它也會創建「滾動條」。

那麼，要避免滾動條很容易，只需將overflow:visible;添加到draggable_main_container即可。

但我需要的是真正阻止可拖動元素，當它得到父母的底部。我該怎麼做？

我認爲這個問題是位置：絕對項attacched到拖動項目（.minus之一;事實上，如果我刪除它，所有的作品...）

來源

2011-12-29 markzzz

當我嘗試實現任何內置的拖放操作時，我遇到了各種各樣的跨瀏覽器問題。我用自己的鼠標或觸摸滾動自己，並使其跨瀏覽器工作，包括移動webkit。 '可拖動'是不可靠的，imo。 – 2011-12-29 14:15:28

這不是一個解決方案！和重新創造輪子不太好！ – markzzz 2011-12-29 14:37:09

我沒有說這是一個解決方案 - 這就是爲什麼我把它放在評論而不是答案。如果車輪是半圓形和半方形，重新發明車輪肯定適用。內置的拖放功能在瀏覽器中不起作用。 – 2011-12-29 14:40:06

所以我用你的代碼一點點發揮各地並想出了一些東西。是的，它是一個修復。

所以你正在通過可拖拽的父級.draggable_container限制你的可拖拽。現在，在可拖動的情況下，你有這個從底部延伸一點的減號，直到它粘在「.draggable_container」的「外部」之外爲止，除此之外它不會粘在它之外，減號元素正在擴展。 draggable_container。現在，當你點擊並再次拖動可拖動時，它的父元素會暫時變大，因此它可以向下滾動，每拖動一次，你就會擴展.draggable_container。

現在，知道當您單擊爲什麼這僅僅是一個問題，但是這是發生了什麼。

解決方法是添加填充到.draggable_container底部的20像素，這從延長.draggable_container停止.minus元素。

你沒有「藍色」框外的「標籤」的小影響，但你可以找到另一種方法來模擬這種情況。

來源

2011-12-29 15:04:04

jQuery的可拖動 - 項目去了在Chrome/Safari瀏覽器

HTML

CSS

jQuery的

回答

相關問題