jQuery UI可排序的連接列表css問題

我正在使用jquery ui排序連接列表。我有一個最重要的要求有兩個問題。jQuery UI可排序的連接列表css問題

項目進入其他名單後面，同時拖動li.ui-splitselect-item
拖動物品到右（當鼠標太右）創建水平滾動

重要：列表ul.ui-splitselect-list應該有overflow-y:auto;所以頭列表保持固定且僅列表項滾動 enter image description here

注意： 我以前問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();

來源

2013-10-30 django

嘗試增加appendTo: document.body和helper: clone選項sortable，像這樣：

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

的js小提琴：http://jsfiddle.net/XpP25/2/

訣竅是創建排序幫手克隆原來的元素，然後追加它以正文元素來解決zIndex問題。所有助手都會在可拖動和可排序的停止事件後自動移除，因此它不應該混淆您的代碼:)

希望它有幫助。

來源

2013-10-30 14:55:07

當我拖動元素在你的JSFIDDLE，它似乎鬆散的字體樣式。我該如何解決這個問題 Thankx – django

我認爲這是原創的jquery ui css。克隆總是有可拖動的和可拖動的拖拽類，但說實話，除了與CSS中的這些類連接的遊標以外，其他任何東西都不能識別。抱歉。我會盡力找到解決方案！ –

jQuery UI可排序的連接列表css問題

回答

相關問題