How to limit sortable items?

Posted on by

Some time ago i searched for a way to limit elements on a sortable box (i used jQuery Interface). For example, i had two boxes and one of them needs no more than three items. After i searched and switch net upside down, i ask directly to the creator or Interface and he gave me a simple (but still efficient) solution:

$('.sort').Sortable({
accept : 'sortItem',
activeclass : 'sortableactive',
	hoverclass : 'sortablehover',
	helperclass : 'sorthelper',
	opacity: 	0.5,
	fit :	false,
	floats:	true,
	onStart: function(){
	console.log($('#big .sortItem').size())
	if ($('#big .sortItem').size() == 3) { //max of items
		console.log($('#big').get(0).dropCfg.a)
		$('#big').get(0).dropCfg.a = 'dummyRandom';
	} else {
		$('#big').get(0).dropCfg.a = 'sortItem';
	}
}
});

Demo here (click!).

No related posts.

4 thoughts on “How to limit sortable items?”

  2. Works for me! I mean… I tried to move elements from bottom to top and the top area accept only 3 items…

  3. Hmm… Guys, indeed, there is a problem. It seems in firefox 3.5 doesn’t work anymore. I will add soon a post on how to limit sortable on jquery UI with latest version of jquery (i think is better this way).

    In fact, i think the problem is on interface itself, rather than my demo ;)

  4. Hi Ionut, it also doesn’t work in IE etc. Do you have any idea for a workaround for this problem? Would be great to hear from you! regards!

Leave a Reply