jQuery Sortable

HTML

<ul class='list_one'>
    <li>drag me</li>
    <li>drag me</li>
    <li class='first'>top most</li>
    <li class='middle'>here i am</li>
    <li class='middle'>airplane</li>
    <li class='last'>least most</li>
</ul>

CSS

li {
	list-style-type: none;
	border: solid 1px #000;
	width: 200px;
	text-align: center;
	margin: 5px;
}

JavaScript

jQuery('ul.list_one').sortable({
connectsWith: 'ul.list_two'
    });
	jQuery('ul.list_two').sortable({
        connectsWith: 'ul.list_one',
        items: "li:not(.first, .last)",
        cancel: ".first, .last",
        over: function(event, ui) {
            if (jQuery('.last:visible').length === 0) {
                jQuery(this).addClass('do_not_drop');
                jQuery(ui.item).addClass('last_dropped');
                console.log('should cancel happen: ' + jQuery('.do_not_drop').length);
            } else {
                jQuery(this).removeClass('do_not_drop');
                jQuery(ui.item).removeClass('last_dropped');
                console.log('should cancel happen: ' + jQuery('.do_not_drop').length);
            }
        }
    });