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

【问题标题】：Jquery UI draggable not scrolling the sortable containerJquery UI可拖动不滚动可排序容器
【发布时间】：2013-01-09 16:40:36
【问题描述】：

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

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

当我尝试将一个项目拖放到可排序对象上时，我无法让可排序滚动条以我想要的方式自动滚动（比如想要上移到第一个元素之上或下移到低于最后一个元素）。但是当我尝试在它们之间拖动和排序项目时，滚动条会在拖动时自动滚动。

是错误还是我的代码工作方式有问题。

完整代码如下：

<body>
    <ul id="draggable" class="connectedSortable">
        <li class="ui-state-default big">Item 1</li>
        <li class="ui-state-default big">Item 2</li>
        <li class="ui-state-default big">Item 3</li>
        <li class="ui-state-default big">Item 4</li>
        <li class="ui-state-default big">Item 5</li>
        <li class="ui-state-default big">Item 6</li>
    </ul>

  <div id="outerDiv">
    <div id="innerDiv">
      <ul id="sortable" class="connectedSortable">
      </ul>
    </div>
  </div>
</body>

//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/的演示

任何帮助将不胜感激。谢谢:)

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable jquery-draggable

【解决方案1】：

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

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

现在可以正常工作几个月了。

想法是在辅助构造回调期间将元素克隆附加到可滚动容器，然后在 1ms 后使用 setTimeout 函数将辅助对象附加到主体，以便能够在网页周围拖动。

  $("#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('<div id="clone" class="ui-state-default big">' + $(this).html() + '</div>');   
        $("#clone").hide();
        setTimeout(function(){
            $('#clone').appendTo('body'); 
            $("#clone").show();
        },1);
        return $("#clone");
    }
  });

链接到我之前的问题：JqueryUI, drag elements into cells of a scrolling dropable div containing large table

【讨论】：

嘿，这行得通。也许在拖动时，我的元素仍然附加到正文中，因此它不是该可滚动容器的一部分。我试图在可排序的“结束”事件上将它附加到可滚动容器中，但它对我不起作用。因此，我现在将使用您的解决方法。谢谢:)
很遗憾，您无法在拖动过程中重新设置选项。
哦，不知道。谢谢。
我刚刚发现您的解决方案虽然在 FF 和 Chrome 中运行良好，但在 IE 8 中不起作用。我尝试调试并寻找解决方案，但找不到太多。你能知道得更好吗？
对你来说是个坏消息，但好的一面是我已经用 IE8 测试了我的小提琴 jsfiddle.net/QvRjL/134 并且它正在工作。所以检查差异，这可能是 CSS 定位问题。

【解决方案2】：

解决办法：

不要使用溢出：自动；

但是

溢出：可见；

【讨论】：

可排序项目上隐藏的溢出也会导致此问题。