This project is read-only.

Limit the number of items per list

Jul 25, 2011 at 8:05 PM

I was wondering if there was a way to set a maximum number of items that can be dragged onto a single list.  I need for the lists to have a max of 6 items and if another item is dragged onto a full list it swaps places with the item it is dragged onto. 

Sep 30, 2011 at 8:03 AM
Edited Sep 30, 2011 at 8:03 AM

How about this code added to your page in addition to dragsort code (this is coded just to handle it when you move an item from list1 to list2):

 

var swappedItem = null;
$("#list1").mousemove(function(ev) {
	var list2size = $("#list2").children(":not([data-droptarget])").size();
	if (list2size == 5 && swappedItem != null) {
		swappedItem.appendTo("#list2");
		swappedItem = null;
		return;
	}
	if (list2size <= 6)
		return;
	var placeholder = $("#list2 li[data-placeholder]");
	swappedItem = placeholder.next().size() > 0 ? placeholder.next() : placeholder.prev();
	swappedItem.appendTo("#list1");
}).mouseup(function() { swappedItem = null; });

How this works is that there are placeholders that appear in both lists when you drag an item, one that indicates where the item will appear when you drop the dragged item identified by the attribute "data-placeholder" and the other is to indicate a possible drop location at the end of the other list identified by the attribute "data-droptarget". So if the placeholder attribute changes in list2 then I know you have dragged your item onto that list, so the code will then move the item that appears after the placeholder (unless the placeholder is at the end) to the first list.

Apologies for the late reply, it's been a busy time for the past couple of months.