jquery sortable() 列表拖放标题答案

【问题标题】：jquery sortable() lets drag&drop headerjquery sortable() 列表拖放标题
【发布时间】：2014-12-31 20:01:17
【问题描述】：

所以我使用 jQuery sortable() 函数来允许用户拖放表格的行。表格本身很标准，看起来像这样：

<table>
    <tr>
        <th>Name</th>
        <th>Surname</th>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
    </tr>
</table>

在我的 Javascript 文件中：

$('table tbody').sortable()

效果很好，除了它使标题可拖动之外，我可以对其进行排序以及其他行。如何解决此问题并使标头静态化？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

只需从插件中排除标题：

给标题tr一个类

<table>
    <tr class="header-tr">
        <th>Name</th>
        <th>Surname</th>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
    </tr>
</table>

然后：

$('table tr').sortable({items: 'tr:not(.header-tr)'});

【讨论】：

【解决方案2】：

只需将此属性添加到您的可排序

$(table).sortable({

            helper: "clone",
            axis: "x",

            revert: 100,
            distance: 0,
            forceHelperSize: true,
            forcePlaceholderSize: true,
            scrollSensitivity: 0,
            start: function(event, ui){
                ui.placeholder.width(ui.helper.width());
            },
            stop: function (event, ui) {

            },
             cancel: '.nondraggable',

            change: function (e, ui) { 
                console.log("sort called");
            },
            tolerance: "pointer"
        });

【讨论】：

只需添加 $(table).sortable({cancel:'nondraggable'})

【解决方案3】：

这里的html不好

<thead> <tbody>

看thead

这个作品

<table>
    <thead>
    <tr>
        <th>Name</th>
        <th>Surname</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>John</td>
        <td>Doe</td>
    </tr>
    <tr>
        <td>John1</td>
        <td>Doe1</td>
    </tr>
    </tbody>
</table>

【讨论】：