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

Posted by liz on Stack Overflow See other posts from Stack Overflow or by liz
Published on 2010-04-16T01:53:52Z Indexed on 2010/04/16 2:03 UTC
Read the original article Hit count: 441

Filed under:

hello everyone, 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();
  });

© Stack Overflow or respective owner

Related posts about jQuery