Question

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

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

这很好用，只是星期几的div不能排序。应该将它们固定好，其他项目应该围绕它们排序。

例如，如果我将＃result6向上拖动到星期一，则＃result5应该下降到星期二，因为包含星期二的div应该保持其位置。 jQuery的sortable是否可行？还是我需要在此处考虑其他方法？

Answer 1

您可以通过将items: "div:not(.days)"添加到option item

来禁用对某些项目的排序

注意：：一周中divs的某几天有day课，有days的课。我在下面的代码段中全部使用了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

我弄清楚了（感谢在http://jsfiddle.net/PQrqS/1/中发现的这个小提琴JQuery sortable lists and fixed/locked items）！

$(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();
}
})
})

这绝对完美：）

jQuery可排序列表中的固定项

2 个答案: