Question

似乎这个问题已被多次询问并回答，但对我来说不起作用。 How to exclude an element from being dragged in sortable list?

此处描述的解决方案确实可以防止单击并拖动行表单，但不会阻止其他元素被拖动。我希望表中的最后一行留在原处，无论如何。我不希望用户能够拖动它，也不希望用户能够拖动其他行。结构需要如下所示：

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

Answer 1

你能做的是：

<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/

Answer 2

您可以将可排序项目限制为某个类，或者在下面的代码段中，将某些类别限制为某个类别。

$(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>

您甚至可以在没有使用:last选择器的任何课程的情况下使其工作：

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

jquery soratble：如何完全排除元素的排序

2 个答案: