CODEWITHSUNDEEP
jquery
liz
liz

Reputation: 1

jquery sortable item cached? #sortable items: '.class1' filter is not working when class is changed dynamically

i came across a weird problem today: i created a sortable list of divs. each div has a class="class1" and items is set to 'class1' (see below simplified code). each div has an a href link that calls a function toggleLock. this function replaces class="class1" with class="locked" for that div. for example: will become

the problem is: even though #sortable is set to "make" only items with class="class1" sortable, replacing the class still allows to be sortable. seems like item class is cached at some point.

  1. i've tried to refresh #sortable ($('#sortable').sortable("refreshPosition") and $('#sortable').sortable("");), but that didn't work.
  2. i've tried both ways of replacing the class: attr('class','lock') and removeClass(), then addClass(). still is sortable.
  3. if class is not changed dynamically, but loads into DOM as , then it's not sortable as expected.

why wouldn't replacement of the class from class1 to locked prevent that div from being sortable? am i missing something?

sample code:

<div id="sortable">
       <div class="class1" id="1">
          <div class="sortHandle">....</div>
               <href="javascript:void(null);" onclick="toggleLock($(this).attr('id').replace('R',''));" id="R1">lock</a>
              <p>This is item 1</p>
       </div>
       <div class="class1" id="2">
              <div class="sortHandle"></div>
               <href="javascript:void(null);" onclick="toggleLock($(this).attr('id').replace('R',''));" id="R2">lock</a>
              <p>This is item 2</p>
       </div>
       <div class="class1" id="3">
              <div class="sortHandle"></div>
             <href="javascript:void(null);" onclick="toggleLock($(this).attr('id').replace('R',''));" id="R3">lock</a>
              <p>This is item 3</p>
       </div>
 </div>

js:

$(function() {
   $("#sortable").sortable({
    items: '.class1',
    handle: '.sortHandle',
    cursor: 'move',
    start: function(e,ui) {
     el = e.target;
     startPos = ui.item.prevAll().length+1;
    },
     update: function(event, ui) {
     data = $('.class1').sortable('toArray');
     newPos = ui.item.prevAll().length+1;
     alert("position: "+startPos+"; newposition: "+newPos);
    }
   }).disableSelection();
  });

Upvotes: 0

Views: 691

Answers (1)

root
root

Reputation: 2357

Changing the class will not make an item unsortable as data already attached to it. The easiest (not the best) way is to clear handlers from elements as you change class using .unbind() The best is to re-initialise sortable once you've updated class names - this will make sure you don't lose performance as you keep modifying the DOM

Upvotes: 0

Related Questions