修复了 jQuery 可排序列表中的项目

Question

我有一个可排序的列表如下：

   <div id = "sortable">

         <div class = "sortableItem day">Monday</div>
         <div class = "sortableItem" id="result1">Hotel 1</div>
         <div class = "sortableItem" id="result2">Hotel 2</div>
         <div class = "sortableItem" id="result3">Hotel 3</div>
         <div class = "sortableItem" id="result4">Hotel 4</div>
         <div class = "sortableItem" id="result5">Hotel 5</div>

         <div class = "sortableItem day">Tuesday</div>
         <div class = "sortableItem" id="result6"></div>
         <div class = "sortableItem" id="result7"></div>
         <div class = "sortableItem" id="result8"></div>
         <div class = "sortableItem" id="result9"></div>
         <div class = "sortableItem" id="result10"></div>


          <div class = "sortableItem day">Wednesday</div>
         <div class = "sortableItem" id="result11"></div>
         <div class = "sortableItem" id="result12"></div>
         <div class = "sortableItem" id="result13"></div>
         <div class = "sortableItem" id="result14"></div>
         <div class = "sortableItem" id="result15"></div>


         <div class = "sortableItem day">Thursday</div>
         <div class = "sortableItem" id="result16"></div>
         <div class = "sortableItem" id="result17"></div>
         <div class = "sortableItem" id="result18"></div>
         <div class = "sortableItem" id="result19"></div>
         <div class = "sortableItem" id="result20"></div>


         <div class = "sortableItem day">Friday</div>
         <div class = "sortableItem" id="result21"></div>
         <div class = "sortableItem" id="result22"></div>
         <div class = "sortableItem" id="result23"></div>
         <div class = "sortableItem" id="result24"></div>
         <div class = "sortableItem" id="result25"></div>

      </div>

      <script>

        $(function() {
          $( "#sortable" ).sortable();
        });

      </script>

这很好用，除了一周中的几天 div 不应该是可排序的。它们应该是固定的，其他项目应该围绕它们进行排序。

例如，如果我将#result6 向上拖动到星期一，那么#result5 应该下降到星期二，因为包含星期二的 div 应该保持其位置。 jQuery 的 sortable 是否可以做到这一点，还是我需要在这里考虑不同的方法？

Answer 1

您可以通过将items: "div:not(.days)" 添加到option item 来禁用对某些项目的排序

注意：一周中的某些日子divs 具有day 类，而某些具有days。我在下面的 sn-p 上使用了days。并在几天内删除sortableItem 课程

$("#sortable").sortable({
  items: "div:not(.days)",
  stop: function(event, ui) {
    $(this).find('.days').each(function(i) {
      $(this).insertBefore('.sortableItem:eq(' + (i * 5) + ')');
    });
  }
});

.days {
  background-color: red;
  cursor: not-allowed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="sortable">

  <div class="days">Monday</div>
  <div class="sortableItem" id="result1">Hotel 1</div>
  <div class="sortableItem" id="result2">Hotel 2</div>
  <div class="sortableItem" id="result3">Hotel 3</div>
  <div class="sortableItem" id="result4">Hotel 4</div>
  <div class="sortableItem" id="result5">Hotel 5</div>

  <div class="days">Tuesday</div>
  <div class="sortableItem" id="result6">Hotel 6</div>
  <div class="sortableItem" id="result7">Hotel 7</div>
  <div class="sortableItem" id="result8">Hotel 8</div>
  <div class="sortableItem" id="result9">Hotel 9</div>
  <div class="sortableItem" id="result10">Hotel 10</div>

  <div class="days">Wednesday</div>
  <div class="sortableItem" id="result11">Hotel 11</div>
  <div class="sortableItem" id="result12">Hotel 12</div>
  <div class="sortableItem" id="result13">Hotel 13</div>
  <div class="sortableItem" id="result14">Hotel 14</div>
  <div class="sortableItem" id="result15">Hotel 15</div>

  <div class="days">Thursday</div>
  <div class="sortableItem" id="result16">Hotel 16</div>
  <div class="sortableItem" id="result17">Hotel 17</div>
  <div class="sortableItem" id="result18">Hotel 18</div>
  <div class="sortableItem" id="result19">Hotel 19</div>
  <div class="sortableItem" id="result20">Hotel 20</div>

  <div class="days">Friday</div>
  <div class="sortableItem" id="result21">Hotel 21</div>
  <div class="sortableItem" id="result22">Hotel 22</div>
  <div class="sortableItem" id="result23">Hotel 23</div>
  <div class="sortableItem" id="result24">Hotel 24</div>
  <div class="sortableItem" id="result25">Hotel 25</div>
</div>

Answer 2

我想通了（感谢我在JQuery sortable lists and fixed/locked items 找到的这个小提琴http://jsfiddle.net/PQrqS/1/）！

$(function() {          

$('#sortable').sortable({
items: ':not(.day)',
start: function(){
    $('.day', this).each(function(){
        var $this = $(this);
        $this.data('pos', $this.index());
    });
},
change: function(){
    $sortable = $(this);
    $statics = $('.day', this).detach();
    $helper = $('<div></div>').prependTo(this);
    $statics.each(function(){
        var $this = $(this);
        var target = $this.data('pos');

        $this.insertAfter($('div', $sortable).eq(target));
    });
    $helper.remove();
}
})
})

这绝对完美:)