启用/禁用可排序取决于元素组

Question

这是我的代码：

    $(function () {
    $('#sortable tbody').sortable({
        start: function (event, ui) {
            var start_pos = ui.item.index();
            var index2 = $(this).children('tr').index(ui.item);
            var test = $(this).children('tr').eq(index2).children('td:last').text();
            ui.item.data('index2', index2);
            ui.item.data('start_pos', start_pos);
        },
        update: function (event, ui) {
            var index = $(this).children('tr').index(ui.item);
            var start_pos = ui.item.data('start_pos');
            $('#sortable tr:nth-child(' + (index + 1) + ') td:last').html(index);
            if (start_pos < index) {
                //update the items before the re-ordered item
                for (var i = index; i > 0; i--) {
                    $('#sortable tr:nth-child(' + i + ') td:last').html(i - 1);
                }
            }
            else {
                //update the items after the re-ordered item
                for (var i = index + 2; i <= $("#sortable tr").length; i++) {
                    $('#sortable tr:nth-child(' + i + ') td:last').html(i - 1);
                }
            }
        },
        axis: 'y'
    });
    $("#sortable tbody").disableSelection();
});

JsFiddle：http://jsfiddle.net/4mcpq/60/

我想在他的第一个 TD 上启用具有相同值的元素的拖放功能。

例如 1st 可以仅移动到位置 2 而不能移动到其他位置（相同的值：'00'）并且只更改其组的最后一个 td。

那么，最终，如何创建具有不同 TR 的链接（取决于她的第一个值 td）？

Answer 1

当您查看文档时：http://jqueryui.com/sortable/#items

“items”选项允许您选择要选择的元素。

问题是在'start'方法期间，你不能实时修改选项并影响它们。

因此您可以创建元素“mousedown”事件，它会在拖动之前更改选项。

看小提琴：http://jsfiddle.net/4mcpq/61/

感兴趣的代码是：

$('.ui-state-default').on('mousedown', function(){
    var cellValue = $(this).children().first().html();
    $('#sortable tbody').sortable('option', 'items', "tr:has(td:contains('"+cellValue+"')) ");
});

评论后更新：

小提琴：http://jsfiddle.net/4mcpq/64/

    update : function(event, ui) {            
        var myvalue = ui.item[0].children[0].outerText;
        var index = $(this).children('tr:has(td:contains('+myvalue+'))').length;
        for(var i=index; i > 0; i--){
                $('#sortable tr:has(td:first:contains('+myvalue+'))').eq(i-1).find('td').last().html(i - 1);
        }     
    },