Fixed items within jQuery sortable list

Question

I have a sortable list as follows:

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

This works fine, except that the days of the week divs should not be sortable. They should be fixed and the other items should sort around them.

So for example, if I drag #result6 up into Monday, then #result5 should drop down into Tuesday as the div containing Tuesday should hold its position. Is this possible with jQuery's sortable or do I need to consider a different method here?

Eddie · Accepted Answer · 2018-07-07 07:40:45Z

1

You can disable sorting to some items by adding items: "div:not(.days)" to option item

Note: Some of the days of the week divs have class day and some have days. I used days on all for the snippet below. And remove sortableItem class on days

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

edited Jul 7, 2018 at 7:40

answered Jul 7, 2018 at 6:29

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DevB1 Over a year ago

Thanks for the reply. I did find something similar but the only thing it doesn't do is to keep the index of the '.days' elements the same. So for example, "Tuesday" is at sortable.children[6] and I want it to stay there regardless of how the items are sorted around it. So If I drag #result6 up above "Tuesday" then #result5 should be forced down below Tuesday. Does that make sense?!

DevB1 Over a year ago

Also I did see this: stackoverflow.com/questions/4299241/… ... but I cannot seem to source jQuery's fixedsortable CDN...

Eddie Over a year ago

Are you trying to have 5 sortables per day?

Eddie Over a year ago

I saw that you already figured it out :) But I would like to share my code. Just change the position of days div on every 5th sortable div

DevB1 · Accepted Answer · 2018-07-07 07:08:15Z

0

I figured it out (well thanks to this fiddle http://jsfiddle.net/PQrqS/1/ I found in 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();
}
})
})

This works absolutely perfectly :)

answered Jul 7, 2018 at 7:08

DevB1

1,6153 gold badges26 silver badges54 bronze badges

Collectives™ on Stack Overflow

Fixed items within jQuery sortable list

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related