jQuery UI Sortable连接列表CSS问题

Question

我正在使用可连接列表进行排序的jquery ui。我有两个最重要的要求的问题。

1. 拖动li.ui-splitselect-item时项目在另一个列表后面
2. 向右拖动项目（当鼠标太右时会创建水平滚动）>>

重要：

列表ul.ui-splitselect-list应该具有overflow-y:auto;，因此列表标题保持固定并且仅滚动列表项

注意：

我以前曾在STACKOVERFLOW上问过这个问题，但没有注意到我的重要要求从解决方案中遗漏了，所以我再次明确地打开了问题。

JSFIDDLE：

http://jsfiddle.net/bababalcksheep/z67Td/

HTML样机：

<div class="ui-splitselect ui-helper-clearfix ui-widget ui-widget-content" style="height:200px;" >
    <div class="ui-widget-content ui-splitselect-selected">
        <div class="ui-widget-header ui-helper-clearfix">
             List1
        </div>
        <ul id="sortable1"  class="ui-splitselect-list" style="height: 332px;">
            <li class="ui-splitselect-item ui-state-default">
                <a class='ui-splitselect-handle-drag'><span class='ui-icon ui-icon-carat-2-n-s'></span></a>
                <span class="ui-splitselect-handle-select">TEST-List1</span>
                <a class="ui-splitselect-handle-move" href="#"><span class="ui-icon ui-icon-plus"></span></a>
            </li>  
        </ul>
    </div>
    <div class="ui-widget-content ui-splitselect-available"  >
        <div class="ui-widget-header ui-helper-clearfix">
              List2
        </div>
        <ul id="sortable2"  class="ui-splitselect-list" style="height: 332px;">
        </ul>
    </div>
</div>
CSS：

.ui-splitselect{font-size:.8em;width:100%!important;text-align:center;margin:0 auto;padding:0}
.ui-splitselect ul{-moz-user-select:none}
.ui-splitselect .ui-widget-header{border:none;font-size:11px}
.ui-splitselect-selected{height:100%!important;float:left;border:none;width:50%;margin:0;padding:0}
.ui-splitselect-available{height:100%!important;width:49.4%;float:left;border-top:none;border-bottom:none;border-right:none;margin:0;padding:0}
.ui-splitselect-list{height:92%!important;position:relative;list-style:none;overflow:auto;margin:0;padding:0}
.ui-splitselect-item{cursor:default;line-height:20px;height:20px;font-size:11px;list-style:none;display:list-item;white-space:nowrap;overflow:hidden;margin:1px;padding:0}
.ui-splitselect-item.ui-sortable-helper{z-index:99999}
.ui-splitselect-handle-select{float:left}
.ui-splitselect-handle-drag{float:left;height:20px;border-top:0;border-bottom:0;cursor:pointer;margin:0 10px 0 5px;padding:2px 5px}
.ui-splitselect-handle-move{text-decoration:none;cursor:pointer;float:right;height:20px;border-top:0;border-bottom:0;margin:0 5px 0 10px;padding:2px 5px}
JS：

 $("#sortable1, #sortable2").sortable({
     connectWith: ".ui-splitselect-list",
     containment: ".ui-splitselect",
     scroll: false,
     placeholder: "ui-state-highlight ui-splitselect-item"
 }).disableSelection();

我正在使用可连接列表进行排序的jquery ui。我有两个最重要的要求的问题。拖动li.ui-splitselect-item时，项目在另一个列表的后面。将项目拖到...

Answer 1

尝试为appendTo: document.body添加helper: clone和sortable选项，如下所示：

Answer 2

我在嵌套可排序项目上也遇到类似的问题。我有多个可排序的容器，它们组成一个网格，然后是这些可排序容器中的小部件。每个小部件内部都有一个嵌套的可排序容器，该容器占用了宽度和高度。在嵌套可排序对象内部，我可以有多个嵌套小部件，它们跨越嵌套可排序对象的宽度。