Could it be possible to maitain certain list items fixed?

Jun 24, 2011 at 9:59 PM

Hello,

I wonder if given certain list, it could be possible to keep certain elements fixed before hand, this is, elements that can't be dragged/dropped to a different position. Using the example, say that we have this list:

<ul id="list1">
	<li><div style="background-color:orange;">1</div></li>
	<li><div>2</div></li>
	<li><div>3</div></li>
	<li><div>4</div></li>
	<li><div>5</div></li>
	<li><div>6</div></li>
	<li><div>7</div></li>
	<li><div>8</div></li>
	<li><div>9</div></li>
</ul>

and I want that the bullets with numbers 1, 3, 7 and 9 (the corners) to not change positions.

I know it is a stretch but any pointer you may give me will be really appreciated.
Keep doing that great work, this is an awesome product!!

-agetroe

Coordinator
Jun 26, 2011 at 4:08 AM
Edited Jun 26, 2011 at 4:11 AM

Unfortunately you'll need a custom version of dragsort to support that, here are the changes in the swapItems function:

if (lastPos == null || lastPos.top > list.draggedItem.offset().top || lastPos.left > list.draggedItem.offset().left)
	$(nlist.pos[ei].elm).before(list.placeHolderItem);
else
	$(nlist.pos[ei].elm).after(list.placeHolderItem);

Change to:

var children = function() { return $(nlist.container).children().not(nlist.draggedItem); };
var fixed = children().filter(".fixed").each(function(i) { this.idx = children().index(this); });
if (lastPos == null || lastPos.top > list.draggedItem.offset().top || lastPos.left > list.draggedItem.offset().left)
	$(nlist.pos[ei].elm).before(list.placeHolderItem);
else
	$(nlist.pos[ei].elm).after(list.placeHolderItem);
fixed.each(function() {
	var elm = children().eq(this.idx).get(0);
	if (this != elm && children().index(this) < this.idx)
		$(this).insertAfter(elm);
	else if (this != elm)
		$(this).insertBefore(elm);
});

Then add the class 'fixed' to all the li elements you don't want to move, then call dragsort like this:

$("#list1").dragsort({ itemSelector: "li:not(.fixed)", dragSelector: "li:not(.fixed) > div", ... });
Jun 27, 2011 at 10:31 PM

This is awesome, thanks!

Aug 12, 2011 at 7:26 PM

Why not merge this to the main development?

It is a handy feature to have in a draggable sorter.

Nov 21, 2011 at 2:08 PM
PJonDevelopment wrote:

Why not merge this to the main development?

It is a handy feature to have in a draggable sorter.

Great feature here! I second adding it to the main library!

Coordinator
Jan 14, 2012 at 1:18 AM
Edited Jan 18, 2012 at 11:48 AM

Done.
http://dragsort.codeplex.com/releases/view/80735

For your example it can now be simply called via:

$("#list1").dragsort({ itemSelector: "li:not(.fixed)", dragSelector: "div", ... });