CODEWITHSUNDEEP
jqueryjquery-ui-sortable
Ya.
Ya.

Reputation: 2627

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

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>

Upvotes: 0

Views: 198

Answers (2)

Mariano Desanze
Mariano Desanze

Reputation: 8153

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)"
    });
});

Upvotes: 0

dave
dave

Reputation: 64657

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/

Upvotes: 1

Related Questions