使用jQuery sortable只允许对特定元素进行排序

时间:2018-08-06 05:12:31

标签: jquery jquery-ui-sortable

我需要允许使用jQuery sortable对特定元素进行排序。请检查下面的代码。

<html lang="en">
<head>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $("tbody").sortable();
        });

    </script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr class="grid">
                <td>AB</td>
                <td>ab@ab.com</td>
                <td><img src="icon_info.gif" border="0" alt="Info" title="Info" class="icon"></td>
            </tr>
            <tr class="grid">
                <td>CD</td>
                <td>cd@cd.com</td> 
                <td><img src="icon_info.gif" border="0" alt="Info" title="Info" class="icon"></td>
            </tr>
            <tr class="grid">
                <td>EF</td>
                <td>ef@ef.com</td>
                <td><img src="icon_info.gif" border="0" alt="Info" title="Info" class="icon"></td>
            </tr>  
        </tbody>    
    </table>​
</body>

在此代码中,我只需要允许对操作列进行排序,而不能对名称和电子邮件列进行排序。请建议我们是否可以这样做。

1 个答案:

答案 0 :(得分:0)

答案是:

first way
      $(function() {
           $("tbody").sortable({
             handle: ".icon"
           });
         });

   second way
 $(function() {
    $("tbody").sortable({
        handle: ".action"
      });
});

使用.class#id初始化句柄可排序参数。我选择了您的图片.icon类。