Jquery UI可拖动不滚动可排序容器

我有一些可拖动的项目（#draggable li），我将它们拖放到可排序的（#sortable）中。

sortable由两个div包装，最外面的div有overflow-y：scroll。 拖放机制工作正常，直到可排序列表扩展和滚动。

当我尝试拖动并直接在可排序项上放置一个项目时，我无法使用可排序的滚动条以我想要的方式自动滚动（比如想要上升到第一个元素上方或者下降到下方最后一个元素）。 但是当我尝试拖动它们之间的项目时，滚动条会在拖动时自动滚动。

它是一个错误还是我的代码工作方式有错误。

这是完整的代码：

 
 
Item 1
 
Item 2
 
Item 3
 
Item 4
 
Item 5
 
Item 6
 
 
 
 
 
 
 
  

// CSS

 #sortable, #draggable { list-style-type: none; margin: 0; padding: 0 0 2.5em; margin-right: 10px; } #sortable li, #draggable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } .marker{ background: none repeat scroll 0 0 #DDDDDD; border-bottom: 1px solid #BBBBBB; border-top: 1px solid #BBBBBB; display: block; height: 20px; width: 100%; text-align: center; vertical-align: middle; color: #666; font-size: 18px; font-style: italic; } #outerDiv{ background: none repeat scroll 0 0 #EEEEEE; height: 100%; right: 0; position: absolute; overflow-y: scroll; top: 0; width: 300px; } #innerDiv{ border: 1px solid #CCCCCC; min-height: 400px; position:absolute; } #sortable{ width: 200px; padding: 10px; border : 1px solid black; min-height: 230px; } #draggable{ position:absolute; top:0; left:0; } .big{ height: 80px; } 

// JS

 $(function() { $( "#sortable" ).sortable({ placeholder: "marker", axis: "y", }); $("#draggable li").draggable({ helper: "clone", cursor: "move", revert: "invalid", revertDuration: 500, connectToSortable: "#sortable" }); }); 

小提琴演示http://jsfiddle.net/8KDJK/21/

任何帮助将不胜感激。 谢谢 ：）

Answer 1

我不确定它是一个错误，但它不是一个经典的场景。

几个月前我花了很多时间找到解决方法，这是我的解决方案： http ： //jsfiddle.net/8KDJK/23/

它现在正在工作几个月没有问题。

我们的想法是在辅助器构造回调期间将元素clone附加到可滚动容器，然后在1ms之后使用setTimeout函数将帮助器附加到body，以便能够在Web页面周围拖动。

  $("#draggable li").draggable({ cursor: "move", revert: "invalid", revertDuration: 500, connectToSortable: "#sortable", //Here is the workaround //********************** containment: 'body', helper: function(){ //Hack to append the element to the body (visible above others divs), //but still bellonging to the scrollable container $('#sortable').append('
' + $(this).html() + '
'); $("#clone").hide(); setTimeout(function(){ $('#clone').appendTo('body'); $("#clone").show(); },1); return $("#clone"); } }); 

链接到我之前的问题： JqueryUI，将元素拖动到包含大表的滚动可删除div的单元格中

Answer 2

解：

不要使用overflow：auto;

但

溢出：可见;