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

选项'项'允许您选择要选择的元素。

问题是在“开始”方法期间，您无法修改选项并实时影响它们。

所以你可以创建元素'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);
        }     
    },

启用/禁用可排序依赖于元素组

1 个答案: