jQuery UI Sortable 连接列表 css 问题

Question

I am using jquery ui sortable with connected lists. I have 2 problems with one most important requirement.

1. Items goes behind the other list while dragging li.ui-splitselect-item
2. Dragging item to right(when mouse is too right) creates Horizontal scroll

IMPORTANT: Lists ul.ui-splitselect-list should have overflow-y:auto; So Header of lists stay fixed and only list items are scrolled

NOTE: I previous asked this question on STACKOVERFLOW but didnt notice my important requirement was missing from solution so i opened question again with clarity.

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

HTML Mockup:

<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();

Answer 1

Try adding appendTo: document.body and helper: clone options for sortable , like this:

$("#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 fiddle: http://jsfiddle.net/XpP25/2/

Trick is in creating sorting helper that clones your original element, and then appending it to body element to resolve zIndex issues. All helpers are automatically removed after stop event of draggable and sortable, so it shouldn't mess your code :)

Hope it helps.

Answer 2

I was having a similar issue with nested sortable items. I have multiple sortable containers, that make up a grid, then widgets inside of those sortable containers. Inside of each widget there is a nested sortable container which takes up the width and height. Inside of the nested sortables I can have multiple nested-widgets, spanning the width of the nested sortable.

Here is how one of those sortables would look:

<div class="sortable">
  <div class="widget">
    <div class="nested-sortable">
      <div class="nested-widget"></div>
    </div>
  </div>
</div>

Now, once I started dragging my nested sortable item, it would go behind every outer widget except for the one containing it. I tried changing the z-index of the items on sort start and no luck. I needed something like jQuery UI's Draggable stack option, which "stacks" the currently dragged item over all other items of the same class.

Here is jQuery UI's draggable stack function on github at line 800.

So, my friend and I modified that code a bit, and called it on the "outer" widget.

$.fn.stack = function () {
    // where $(this) == '.widget'
    var o = $(this).closest('.sortable').siblings('.sortable').find('.widget');

    // create an array of all the widgets
    var group = $(o).sort(function(a,b) {
        // compare the each set of widgets
        return (parseInt($(a).css("z-index"),10) || 1) - (parseInt($(b).css("z-index"),10) || 1);
    });
    if (!group.length) { return; }

    var min = parseInt($(group[0]).css('z-index')) || 1; // first widget's z-index
    $(group).each(function(i) {
        // increase each widget's z-index by min + $(this) widget's index value
        $(this).css('z-index',  min + i);
    });

    // make currently dragged widget's z-index min + length of group
    $(this[0]).css('z-index', min + group.length);
}

Then call in sortable start:

$('.nested-sortable').sortable({
    start: function(event, ui) {
        $(this).closest('.widget').stack();
    }
});

Here is my codepen for reference: Nested Grid System