StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Just add the if clause to check the number of elements in the sortable and unbind the draggable event when u have reached that number.</p> <p><strong>EDIT: (Includes multiple list support now)</strong></p> <pre><code>$('.draggable').draggable({revert:true,helper:'clone',connectToSortable: '.sortable'}); $('.sortable').sortable({ connectWith:'.sortable', receive: function(ui) { if($(this).children().length >=6) { $(this).children().addClass('filled'); $(this).addClass('dontDrop'); $('.sortable').sortable('option', 'connectWith',$('.sortable').not('.dontDrop')); $('.draggable').draggable('option', 'connectToSortable',$('.sortable').not('.dontDrop')); }else { $(this).children().removeClass('filled'); } add_delete(); } }); function add_delete() { $('.delete').remove(); $('.sortable>li').append('<span class="delete">--</span>'); $('.delete').unbind('click').click(function(){ if($(this).parent().siblings().length <=5) {//for atmost 6 children in sortable $(this).parent().parent().children().removeClass('filled'); $(this).parent().parent().removeClass('dontDrop'); console.log($('.sortable').not('.dontDrop')); $('.sortable').sortable('option', 'connectWith',$('.sortable').not('.dontDrop')); $('.draggable').draggable('option', 'connectToSortable',$('.sortable').not('.dontDrop')); } $(this).parent().hide('slow').remove(); }); } add_delete(); </code></pre> <p>Check fiddle here <a href="http://jsfiddle.net/VMKZV/1/" rel="nofollow">JSFiddle</a></p> <p>So what I have used here is: One can pass not just selectors but elements themselves to the connectWith/connectToSortable options. Whenever an 'ul' has 6 elements I give it the class 'dontDrop' and it is hence excluded from the connections. Hope this clears it out for you.</p> <p>Let that bounty come this way :D</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload