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
jQuery
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();
});
© Stack Overflow or respective owner