12

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

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

秒表是可排序的（带有箭头）。

第三个表可选择（不要单击箭头）。

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

如果因为表格而很难，那么带有列表的示例也会很棒。

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

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

4

5 回答 5

12

主要代码如下所示。

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. 从第一个表中，选择多个项目；
  2. 通过将鼠标悬停在选定项目之一上；
  3. 您可以将选择的那些移动到列表中任何您想要的位置；
  4. 维护所有选定项目的排序顺序；

希望这就是你要找的。

于 2012-06-22T08:59:20.600 回答
2

AFAICT 你的“jsfiddle”工作得很好......但是每当我对 jquery-ui 烦人地坚持选择文本而不是它应该做的任何其他事情感到沮丧时，我都会参考这个片段..

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

不确定您是否可以将“禁用”翻转为“启用”，但这是我的 0.02 美元。此外，这是一个好主意，以防有人有一个蹩脚的浏览器/设备可能在同一个“组”元素中定义一个“非活动部分”，为拖动操作提供一个“句柄”......（就像你的小提琴箭头-type-things) 否则这些点击可能会被无情地误认为是选择/编辑的意图……</p>

于 2012-06-21T05:00:41.330 回答
2

Matthew Andersen 创建的 Gist 完美运行：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/

于 2015-04-09T10:15:53.713 回答
1

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

Have the first list selectable (but not sortable) - then when a selection is finished, wrap the selection in a div and then make that div sortable - this way the selection should then drag as one.

于 2012-06-16T11:41:34.333 回答
0 
$( "#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>" );
于 2013-07-15T14:12:24.043 回答