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: <div class="class1" id="2"> will become <div class="locked" id="2">

the problem is: even though #sortable is set to "make" only items with class="class1" sortable, replacing the class still allows <div class="locked" id="1"> 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 <div class="locked" id="1"> is sortable.

3. if class is not changed dynamically, but loads into DOM as <div class="locked" id="1">, 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?

thanks,

liz

 

sample code:

<div id="sortable">
        <div class="class1" id="1">

              <div class="sortHandle"></div>

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

             <a 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();

  });