Allow sorting on only a specific element using jQuery sortable

Question

I need to allow sorting on a specific element using jQuery sortable.Please check code below.

<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>[email protected]</td>
                <td><img src="icon_info.gif" border="0" alt="Info" title="Info" class="icon"></td>
            </tr>
            <tr class="grid">
                <td>CD</td>
                <td>[email protected]</td> 
                <td><img src="icon_info.gif" border="0" alt="Info" title="Info" class="icon"></td>
            </tr>
            <tr class="grid">
                <td>EF</td>
                <td>[email protected]</td>
                <td><img src="icon_info.gif" border="0" alt="Info" title="Info" class="icon"></td>
            </tr>  
        </tbody>    
    </table>
</body>

In this code I need to allow sorting only on action column not on name and email column. Please suggest if we can do this.

anil singh butola · Accepted Answer · 2018-08-06 07:23:34Z

2

Ans is:

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

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

initialize your handle sortable parameter with .class or #id. I chose your image .icon class.

edited Aug 6, 2018 at 7:23

answered Aug 6, 2018 at 5:39

anil singh butola

1292 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ali Soltani Over a year ago

As you can see in jsfiddle.net/ali_soltani/ta6yw9gv, it doesn't work for tds that aren't in same tr.

anil singh butola Over a year ago

@AliSoltani it is ok

Ali Soltani Over a year ago

Please see a fiddle like my fiddle that others can see your solution.

anil singh butola Over a year ago

@AliSoltani ha ha according to problem my both ans is correct way i go for your fiddle

Ali Soltani Over a year ago

Ramkishan needs to sort only one td (action) not a row. As I see in your fiddle, the row is changed not a td!

Collectives™ on Stack Overflow

Allow sorting on only a specific element using jQuery sortable

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related