1

我正在使用可通过连接列表排序的 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();
4

2 回答 2

6

尝试添加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-30T14:55:07.237 回答
1

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

以下是其中一个可排序的外观：

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

现在，一旦我开始拖动嵌套的可排序项，它就会出现在每个外部小部件的后面，除了包含它的小部件。我尝试在排序开始时更改项目的 z-index，但没有运气。我需要像 jQuery UI 的 Draggablestack选项这样的东西，它将当前拖动的项目“堆叠”在同一类的所有其他项目上。

这是 jQuery UI 在github上第800 行的可拖动堆栈函数。

因此，我和我的朋友稍微修改了该代码，并在“外部”小部件上调用了它。

$.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);
}

然后调用可排序的开始：

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

这是我的参考代码：嵌套网格系统

于 2019-10-31T17:34:47.623 回答