在沒有滾動jQueryUI排序元素的情況下拖動

如果我有一個固定高度的div和可排序的元素，並且如果將其中一個拖到下面的列表中，div將滾動。我想我可能會設置溢出：隱藏，這隱藏滾動條，但仍然滾動div。在沒有滾動jQueryUI排序元素的情況下拖動

這是很容易在這個小提琴來形容：http://jsfiddle.net/PrZNr/2/

如果我試圖拖動A1下B1，那麼div會滾動這可能是令人沮喪的用戶。我該如何防止這種行爲？

<div id="items"> 
    <ul class="sort"> 
     <li>Item A1</li> 
     <li>Item A2</li> 
     <li>Item A3</li> 
     <li>Item A4</li> 
     <li>Item A5</li> 
     <li>Item A6</li> 
     <li>Item A7</li> 
     <li>Item A8</li> 
     <li>Item A9</li> 
     <li>Item A10</li> 
    </ul> 
</div> 
<ul class="sort"> 
    <li>Item B1</li> 
    <li>Item B2</li> 
    <li>Item B3</li> 
    <li>Item B4</li> 
    <li>Item B5</li> 
</ul> 

<script> 
$(function() { 
    $('.sort').sortable({ 
     connectWith: '.sort', 
     start: function() { 
      $('#items').css({ 
       overflow: 'hidden' 
      }); 
     }, 
     stop: function() { 
      $('#items').css({ 
       overflow: 'auto' 
      }); 
     } 
    }); 
}); 
</script>

來源

2012-01-18 ActionOwl

你需要'#items .sort'是可以排序嗎？或者它只是可拖動事物的來源，而這些來自其他列表？ – 2012-01-18 07:54:00

是的，它也需要排序 – ActionOwl 2012-01-18 09:16:09

嗯，不知何故，我忽略了顯而易見的：「滾動」選項我只需要滾動設置爲false ...

http://jsfiddle.net/PrZNr/3/

來源

2012-01-18 12:13:18 ActionOwl

在我的情況是好的，但使用滾動選項時，我發現了很多錯誤，它導致其他連接列表無法正常工作。即使小提琴似乎沒有正常工作。例如，如果您嘗試在B1下面拖動A1。不知何故，我一定忽略了這一點。無論哪種方式，滾動都是依賴於越野車。 – ActionOwl 2012-01-19 07:24:03

@ActionOwl：我在JSfiddle中查看了你的例子。垂直滾動條完美消失。但是，當我嘗試拖動元素時，仍然可以在屏幕底部看到水平滾動條。如何在不將容器的「溢出」屬性（頁面本身）設置爲隱藏的情況下將其刪除？ – Ishita 2013-08-27 16:17:01

@Ishita，你可以將列表包裝在一個容器中，並使用包含選項來防止元素被拖動，從而爲您提供水平滾動條。這是小提琴。 http://jsfiddle.net/PrZNr/103/ – 2013-08-28 08:01:04

在沒有滾動jQueryUI排序元素的情況下拖動

回答

相關問題