jquery ui sotable连接列表项容器+ zinxed问题

我正在使用jquery ui对连接列表进行排序。 我有2个问题。

1.Drag Index：当从一个列表中拖动项目时，说A到其他列表说B，项目在拖动时会在列表B后面，但在删除后会正确显示。

2.Container scrolling：当左侧列表中的项目被拖动到右侧时，它不是先显示占位符，而是滚动容器然后出现在其他列表中。

JSFIDDLE ： http ： //jsfiddle.net/bababalcksheep/Cd4Sr/

类似： http ： //quasipartikel.at/multiselect_next/

HTML：

 
 
 
 
 
  Test1  
 
 
 
 
 
 
 
 
  

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{float:left;border:none;margin:0;padding:0} .ui-splitselect-available{float:left;border-top:none;border-bottom:none;border-right:none;margin:0;padding:0} .ui-splitselect-list{position:relative;overflow:auto;overflow-x:hidden;list-style:none;width:100%;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} 

Answer 1

删除overflow: auto; 和overflow-x: hidden; 来自类ui-splitselect-list 。 将类ui-splitselect overflow设置为overflow-y: auto; 。

这是更新的>>> JSFiddle <<<

CSS：

  .ui-splitselect { font-size: 0.8em; width:100% !important; padding: 0; margin: 0 auto; text-align:center; overflow-y: auto; /*-----updated-----*/ } .ui-splitselect-list { position: relative; padding: 0; margin: 0; list-style: none; /*-----updated Removed overflow: auto;-----*/ /*-----updated Removed overflow-x: hidden;-----*/ width: 100%; } 

jQuery的：

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