Question

我有一个桌子里面有几个tbody，很显然是在tbody里面，我想要的是用t体和t对tr体内排序，但不要在tr里面混合t。

我的javascript代码是这样的：

$("#diagnosis_list").sortable({
        //helper: fixHelperModified,
        //fixed: $("side1")

        start: function (event, ui) {
            ui.item.css('border', '1px solid red');
        },

        items: ".tbody, .abc",
        axis: "y",
        connectWith: ".tbody",

        placeholder: "sortable-placeholder",

        stop: function (event, ui) {
            //reset to no border or whatever your desired default border is
            ui.item.css('border', '');
            renumber_table('#diagnosis_list');
        }

        //stop: function(event,ui) {renumber_table('#diagnosis_list')}
    }).disableSelection();

在这里你可以检查出来（你可以看到wird行为）： http://jsfiddle.net/elfstone321/yopk086n/

我该如何实现这一目标？感谢

Answer 1

您需要有三个sortables：一个用tbodys排序，tbody用tr排序tbody。

对于handles，您需要sortable，否则无法知道您要定位的handles。这意味着这些tr不适用于handles可排序。

例如，您可以将每个表的第一行定义为tbody sortable的{{1}}。然后你需要将可排序应用于tr，除了每个tbody的第一个。像这样举例如：

 $("#diagnosis_list").sortable({

        handles: '.tbody > tr:first-child',//first row of each tbody will activate this sortable
        start: function (event, ui) {
            ui.item.css('border', '1px solid red');
        },
        items: ".tbody",//you only sort tbody
        axis: "y",
        placeholder: "sortable-placeholder",
        stop: function (event, ui) {
            //reset to no border or whatever your desired default border is
            ui.item.css('border', '');
            renumber_table('#diagnosis_list');
        }

    }).disableSelection();

    $("tbody").sortable({//you add sortable on each tbody, so <tr> are sortable

        items: 'tr:not(:first-child)',//you can sort all tr except the first one
        start: function (event, ui) {
            ui.item.css('border', '1px solid red');
        },
        axis: "y",
        placeholder: "sortable-placeholder",
        stop: function (event, ui) {
            //reset to no border or whatever your desired default border is
            ui.item.css('border', '');
            renumber_table('#diagnosis_list');
        }
    }).disableSelection();

http://jsfiddle.net/wx245bky/2/

Jquery ui-sortable - 如何使用tbody和tr拖动tbody？

1 个答案: