jQuery Sortable

by mattopen

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="title">Column 1</div>
<ul class='list_one connectedSortable'>
    <li>drag me</li>
    <li>drag me</li>
    <li>drag me</li>
    <li>drag me</li>
    <li>drag me</li>
    <li>drag me</li>
    <li>drag me</li>
    <li>drag me</li>
</ul>

<div class="title">Column 2</div>
<ul class='list_two connectedSortable'>
    <li class='first'>top most - FORBIDDEN</li>
    <li class='middle'>here i am</li>
    <li class='middle'>airplane</li>
    <li class='middle'>airplane</li>
    <li class='middle'>airplane</li>
    <li class='middle'>airplane</li>
    <li class='middle'>airplane</li>
    <li class='middle'>airplane</li>
    <li class='middle'>airplane</li>
    <li class='middle'>airplane</li>
    <li class='last'>least most - FORBIDDEN</li>
</ul>

CSS

.title{float:left;}
        .list_one, .list_two {
            border: 1px solid #eee;
            width: 200px;
            min-height: 20px;
            margin: 0;
            padding: 5px 0 0 0;
            float: left;
            margin-right: 10px;
            height:500px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        li {
            list-style-type: none;
            border: solid 1px #000;
            width: 140px;
            text-align: center;
            padding:15px;
            margin: 0 5px 5px 5px;
            font-size: 1.2em;
            height: 50px !important;
        }

JavaScript

$(function() {
        $( ".connectedSortable" ).sortable({
            connectWith: '.connectedSortable',
            items: "li:not(.first, .last)",
            placeholder: "ui-state-highlight",
            over: function(e, ui){
                $(ui.sender).sortable('instance').scrollParent = $(e.target)
            },
            stop: function (e, ui) {
                if ( $('.list_two li').length < 4 ) {
                    $('.list_two li:eq(2):not(.first, .last)').after($('.list_two li:eq(1)'));
                }
            }
        }).disableSelection();
    });