I need to create an orderable drag and drop list where one or more positions can be fixed as well as the link model:
var locktos = [];
$(document).ready(function() {
$("#sortable li.static").each(function () {
locktos.push($(this).index());
$(this).attr("id", "static-" + $(this).index());
});
alert($("#sortable li").eq(locktos[1]).attr("id"));
});
$("#sortable").sortable({
"cancel":"li.static",
"change":function(event,ui) {
// var locktos = [1, 5];
for(i=0;i<locktos.length;i++) {
console.log(locktos[i]);
var thisindex = $(ui.helper).index();
var fixed = $("#static-"+locktos[i]);
var index = fixed.index();
var targetindex = locktos[i]+1;
console.log(index + ", targetindex: " + targetindex);
if(index !== targetindex) {
if(index > targetindex ) {
fixed.prev().insertAfter(fixed); //move it up by one position
} else if(index==(targetindex-1) && thisindex>targetindex) {
//don't move it at all
} else {
fixed.next().insertBefore(fixed); //move it down by one position
}
} else if(index==targetindex && thisindex>targetindex) {
fixed.prev().insertAfter(fixed); //move it up by one position
}
}
}
});
ul > li {display:block;height:15px;width:100px;background:#ccc;margin:2px;padding:3px;border:1px solid #aaa;}
<ul id="sortable">
<li>oranges</li>
<li class="static">apples</li>
<li>bananas</li>
<li>pineapples</li>
<li>grapes</li>
<li class="static">pears</li>
<li>mango</li>
</ul>
But I need to do this with the SortableJS plugin from this link below http://sortablejs.github.io/Sortable/