enable/disable sortable depend on group of element

Question

Here is my code :

    $(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/

I want to enable drag and drop just on element with same value on his first TD.

For example 1st can be move just on position 2 and not on other position (same value : '00') and change only the last td of their group.

So, in definitive, how to create a link with different TR (depends on her 1st value td) ?

Answer 1

When you look at the doc : http://jqueryui.com/sortable/#items

The option 'items' allow you to choose which elements are selected.

The problem is that during 'start' method, you can't modify the options and affect them in real time.

So you can create the element 'mousedown' event, and it will change the options just before dragging.

Look at the fiddle : http://jsfiddle.net/4mcpq/61/

The code with interrest is :

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

UPDATE AFTER COMMENT :

fiddle : 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);
        }     
    },