Sortable - Multiple ConnectWith Containers

by bizamajig

HTML

<div class="app-workspace-sortable"> <!-- start Root-level sortable categories - Phases -->

	<div class="col-xs-12 hierarchy-category">
		TEXT 111
	</div>
	<div class="col-xs-12 hierarchy-category">
		TEXT 222
	</div>
	<div class="col-xs-12 hierarchy-category">
		TEXT 333
	</div>
	<div class="col-xs-12 hierarchy-category">
		TEXT 444
	</div>

</div>
<div class="wrap">
            <ul class="one">
                <li class="naslov">1111111111111</li>
                <li>Neki predmet</li>
                <li>Neki predmet</li>
            </ul>
            <ul class="two">
                <li class="naslov">222222222222222</li>
                <li>Neki predmet</li>
                <li>Neki predmet</li>
            </ul>
            <ul class="three">
                <li class="naslov">333333333333</li>
                <li>Neki predmet</li>
                <li>Neki predmet</li>
            </ul>
            <ul class="four">
                <li class="naslov">44444444444</li>
                <li>Neki predmet</li>
                <li>Neki predmet</li>
            </ul>
    </div>

CSS

.one li {
    background-color: gray;
}

.two li {
    background-color: red;
}

.three li {
    background-color: yellow; 
}

.four li {
    background-color: green;
}
.bizamajig-ui-placeholder2 {
    border: 2px solid black;
    background-color: lightgray !important;
    box-shadow: 0 0 5px black;
    color: white;
}

JavaScript

$(".app-workspace-sortable").sortable({
     containment : 'document',
     tolerance: 'pointer',
     cursor: 'pointer', 
     revert: 'true',
     opacity : 0.6,
     connectWith : "", 
     forcePlaceholderSize:	true,
     placeholder: "bizamajig-ui-placeholder2"
     //,    items : 'li:not(.title)'
});
$("ul").sortable({
     containment : 'document',
     tolerance: 'pointer',
     cursor: 'pointer', 
     revert: 'true',
     opacity : 0.6,
     connectWith : "ul", 
     placeholder: "bizamajig-ui-placeholder2",
    items : 'li:not(.title)'});
$('ul').disableSelection();
//$( "ul" ).sortable({ placeholder: "bizamajig-ui-placeholder2" });