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.
i've tried to refresh #sortable ($('#sortable').sortable("refreshPosition") and $('#sortable').sortable("");), but that didn't work.
i've tried both ways of
replacing the class: attr('class','lock') and removeClass(), then addClass(). still is sortable.
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();
});
