在没有滚动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>

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

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

答

嗯，不知何故，我忽略了显而易见的： “滚动” 选项我只需要滚动设置为false ...

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

在我的情况是好的，但使用滚动选项时，我发现了很多错误，它导致其他连接列表无法正常工作。即使小提琴似乎没有正常工作。例如，如果您尝试在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排序元素的情况下拖动

相关推荐