0

接続されたリストでソート可能なjquery uiを使用しています。2つの問題があります。

1.ドラッグ インデックス:アイテムを 1 つのリスト A から別のリスト B にドラッグすると、アイテムはドラッグ中にリスト B の後ろに移動しますが、ドロップすると正しく表示されます。

2.コンテナーのスクロール:左側のリストから項目を右にドラッグすると、最初にプレースホルダーを表示する代わりに、コンテナーをスクロールしてから他のリストに表示されます。

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

類似: http://quasipartikel.at/multiselect_next/

HTML:

<div class="ui-splitselect ui-helper-clearfix ui-widget ui-widget-content">
    <div class="ui-widget-content ui-splitselect-selected" style="width: 50%;">
        <div class="ui-widget-header ui-helper-clearfix">
        </div>
        <ul id="sortable1" class="ui-splitselect-list" style="height: 200px;">
            <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">Test1</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" style="width:49.8%;">
        <div class="ui-widget-header ui-helper-clearfix">
        </div>
        <ul id="sortable2" class="ui-splitselect-list" style="height: 200px;">
        </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{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}
4

1 に答える 1

1

overflow: auto;およびoverflow-x: hidden; クラスから削除されましたui-splitselect-list。クラスui-splitselectオーバーフローを に設定し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();
于 2013-10-30T06:17:10.217 に答える