Question

这就是我得到的：
http://jsfiddle.net/hashie5/vk6rZ/
（不介意布局）

第一个表是第二个和第三个表的组合，这是需要完成的表。

秒表可以排序（带箭头）。

第三个表格可选（不要点击箭头）。

目标是：当您选择多个项目时，您应该能够同时对它们进行排序。

如果由于表格而变硬，那么列表的例子也会很棒。

在辅助函数中，我尝试克隆所有选定的（ui-selected类）项目，但那太麻烦了

编辑：
我创造了一个新的小提琴：http://jsfiddle.net/hashie5/AZr9Z/
这很好用，但它还没有100％完成

Answer 1

演示 http://so.lucafilosofi.com/jquery-ui-selectable-and-sortable-combined/

主要代码如下所示。

sort : function(event, ui) {
    var $helper = $('.ui-sortable-helper'), hTop = $helper.offset().top, hStyle = $helper.attr('style'), hId = $helper.attr('id');
    if (first_rows.length > 1) {
        $.each(first_rows, function(i, item) {
            if (hId != item.id) {
                var _top = hTop + (26 * i);
                $('#' + item.id).addClass('ui-sortable-helper').attr('style', hStyle).css('top', _top);
            }
        });
    }
},
start : function(event, ui) {
    if (ui.item.hasClass('ui-selected') && $('.ui-selected').length > 1) {
        first_rows = $('.ui-selected').map(function(i, e) {
            var $tr = $(e);
            return {
                tr : $tr.clone(true),
                id : $tr.attr('id')
            };
        }).get();
        $('.ui-selected').addClass('cloned');
    }
    ui.placeholder.html('<td colspan="99">&nbsp;</td>');
},
stop : function(event, ui) {
    if (first_rows.length > 1) {
        $.each(first_rows, function(i, item) {
            $(item.tr).removeAttr('style').insertBefore(ui.item);
        });
        $('.cloned').remove();
        first_rows = {};
    }
    $("#uber tr:even").removeClass("odd even").addClass("even");
    $("#uber tr:odd").removeClass("odd even").addClass("odd");
}

我不确定我理解你想要什么，无论如何代码实际上是：

从第1张表中选择多个项目;
暂停其中一个所选项目;
您可以在列表中的任何位置移动所选内容;
保留所有选定项目的排序顺序;

希望这就是你要找的东西。

Answer 2

AFAICT你的“jsfiddle”工作得很好......但每当我因为jquery-ui沮丧而烦恼地坚持选择文本而对其他人应该这样做时，我会参考这个片段..

// disables text selection on sortable, draggable items 
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();

不确定你是否可以将“禁用”翻转为“启用”，但是我的$ .02。此外，它是一个好主意，以防有人有一个蹩脚的浏览器/设备可能在同一“组”元素内定义“非活动部分”，以提供拖动动作的“句柄”...（如你的小提琴的箭头 - 类型的东西）否则这些点击可能被无情地误认为是选择/编辑的意图...

Answer 3

Matthew Andersen创作的主旨完美无缺：https://gist.github.com/mattandersen/9777423

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/cupertino/jquery-ui.css" />

    <style>
        #list {
            list-style: none;
            padding-left: 0;
        }

        #list .sort-handle {
            display: none;
        }

        #list .ui-selected .sort-handle
         {
            display: inline;
            padding: 0 0.5em;
            cursor: pointer;
        }

        li.ui-selected {
            background-color: #8888cc;
            color: white;
            font-weight: bold;
            background-image: none;
        }
        li.ui-selecting {
            background-color: #ccccff;
            color: white;
            background-image: none;
        }

    </style>
</head>
<body>
    <ul id="list">
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 1</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 2</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 3</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 4</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 5</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 6</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 7</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 8</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 9</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 10</li>
    </ul>

    <script>
        $(function() {
            $('#list').selectable({
                cancel: '.sort-handle'
            }).sortable({
                items: "> li",
                handle: '.sort-handle',
                helper: function(e, item) {
                    if ( ! item.hasClass('ui-selected') ) {
                        item.parent().children('.ui-selected').removeClass('ui-selected');
                        item.addClass('ui-selected');
                    }

                    var selected = item.parent().children('.ui-selected').clone();
                    item.data('multidrag', selected).siblings('.ui-selected').remove();
                    return $('<li/>').append(selected);
                },
                stop: function(e, ui) {
                    var selected = ui.item.data('multidrag');
                    ui.item.after(selected);
                    ui.item.remove();
                }
            });
        });
    </script>
</body>

演示： http://jsfiddle.net/ghaq69b3/

Answer 4

我没有对此进行测试，但这是一个想法：

让第一个列表可选（但不可排序） - 然后当选择完成时，将选择包装在div中然后使该div可排序 - 这样选择应该作为一个拖动。

Answer 5

$( "#list" )
  .sortable({ handle: ".handle" })
  .selectable()
  .find( "li" )
  .addClass( "ui-corner-all" )
  .prepend( "<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>" );

jquery ui可选择和可排序组合

5 个答案: