jquery soratble: how to Completely exclude an element from being sorted

Question

It may seem like this question has been asked and answered multliple times but it won't work for me. How to exclude an element from being dragged in sortable list?

The solution described here indeed prevents the row form being clicked and dragged but it won't prevent other elements from being dragged around it. I want the last row in the table to stay where it is no matter what. I don't want the user to be able to drag it nor do I want the user to be able drag other rows past it. The structure needs to look as follows:

<table ui:sortable>
   <tbody>
      <tr>
      <tr>
       ..
      <tr>
      <tr>   -----this row needs to stay
   </tbody>
</table>

`but it won't prevent other elements from being dragged around it`, so you wan't nothing in the list to be sortable? Please provide more context. — Tim, Oct 22 '15 at 22:15
It sounds like you need multiple sortable elements, something like http://jsfiddle.net/nbLeba3t/ — dave, Oct 22 '15 at 22:17

dave · Answer 1 · 2015-10-22T23:13:53.967

1

What you could do is this:

<table class="sortable">
    <tbody>
        <tr>
        <tr>
         ..
        <tr>
        <tr>   
        <tr>-----this row needs to stay
    </tbody>
</table>


$(function() {
    $last = $(".sortable tr").last();
    $( ".sortable").sortable({
      items: "tr",
      cancel: "tr:last-child",
      update: function(event, ui) {
          $last.appendTo(".sortable");
      }
    });
});

http://jsfiddle.net/nbLeba3t/8/

edited Oct 22 '15 at 23:13

answered Oct 22 '15 at 22:37

dave

62,300
5
72
93

Thanks but your example has "ui:sortable" at tbody not at the table element. For reasons I won't get into here ui:sortable needs to be at the table element. – Ya. Oct 22 '15 at 22:57
`$( ".sortable tbody").sortable();` can't you just do that, in this case? http://jsfiddle.net/nbLeba3t/2/ – dave Oct 22 '15 at 22:58
It is a completely valid solution and if I was starting fresh I'd definitely try that. However I'm dealing existing legacy code that has the table structure matching the controller. The controller code relies on the sticky row being exactly a entry in the table body. The code is fairly complex and I didn't write it and I'd rather not touch it at this point. – Ya. Oct 22 '15 at 23:06
See edit, basically after they drag you just take what was originally the last item, and stick it back at the end. – dave Oct 22 '15 at 23:11
Upvoted your answer, need to run now, will try implementing it. – Ya. Oct 22 '15 at 23:21

score 0 · Answer 2 · answered Oct 22 '15 at 23:26

You can restrict the sortable items to be of a certain class, or like in code snippet below, to everything but of a certain class.

$(function() {
    $( ".sortable").sortable({
      items: "tr:not(.footer)"
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<table class="sortable">
    <tbody>
        <tr>
            <td>Test1</td>
        </tr>
        <tr>
            <td>Test2</td>
        </tr>
        <tr>
            <td>Test3</td>
        </tr>
        <tr>
            <td>Test4</td>
        </tr>
        <tr>
            <td>Test5</td>
        </tr>
        <tr class="footer">
            <td>I'm a fixed footer</td>
        </tr>
    </tbody>
</table>

You could even make it work without having any class using the :last selector:

$(function() {
    $( ".sortable").sortable({
      items: "tr:not(:last)"
    });
});

jquery soratble: how to Completely exclude an element from being sorted

2 Answers2