SORTABLE - MULTIPLE - RECEIVER - PANEL SLIDER - BIZAMAJIG USAGE

by bizamajig

HTML

<h3>Conected lists :  You can move items between any list</h3>     
<div id="sortable1" class="sortable_list connectedSortable">
<div class="ui-state-default">List 1 - Item 1</div>
<div class="ui-state-default">List 1 - Item 2</div>
<div class="ui-state-default">List 1 - Item 3</div>
<div class="ui-state-default">List 1 - Item 4</div>
<div class="ui-state-default">List 1 - Item 5</div>
</div>
     
<div id="sortable2" class="sortable_list connectedSortable">
<div class="ui-state-highlight">List 2 - Item 1</div>
<div class="ui-state-highlight">List 2 - Item 2</div>
<div class="ui-state-highlight">List 2 - Item 3</div>
<div class="ui-state-highlight">List 2 - Item 4</div>
<div class="ui-state-highlight">List 2 - Item 5</div>
</div>     
     
<div id="sortable3" class="sortable_list connectedSortable">
<div class="ui-state-default">List 3 - Item 1</div>
<div class="ui-state-default">List 3 - Item 2</div>
<div class="ui-state-default">List 3 - Item 3</div>
<div class="ui-state-default">List 3 - Item 4</div>
<div class="ui-state-default">List 3 - Item 5</div>
</div> 

<div id="sortable4" class="sortable_list connectedSortable">
<div class="ui-state-highlight">List 4 - Item 1</div>
<div class="ui-state-highlight">List 4 - Item 2</div>
<div class="ui-state-highlight">List 4 - Item 3</div>
<div class="ui-state-highlight">List 4 - Item 4</div>
<div class="ui-state-highlight">List 4 - Item 5</div>
</div>

CSS

.sortable_list {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}

.sortable_list > div {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}

JavaScript

if ( false ) $( ".sortable_list" ).sortable({
    connectWith: ".connectedSortable",
    /*stop: function(event, ui) {
        var item_sortable_list_id = $(this).attr('id');
        console.log(ui);
        //alert($(ui.sender).attr('id'))
    },*/
    receive: function(event, ui) {
        alert("dropped on = "+this.id); // Where the item is dropped
        alert("sender = "+ui.sender[0].id); // Where it came from
        alert("item = "+ui.item[0].innerHTML); //Which item (or ui.item[0].id)
    }         
}).disableSelection();

    var currentParent;
   
        $(".sortable_list > div").draggable({
						containment: '#sortable1, #sortable2, #sortable3, #sortable4',
	          revert: 'invalid',
            start: function(){
                currentParent = $(this).parent().attr('id');
            }
        });