3 Section Drag and Drop

by SebastianPataneMasuelli

HTML

<div id="available">
    <ul>
        <li class="available1">1a</li>
        <li class="available1">1b</li>
    </ul>
    
    <ul>
        <li class="available2">2a</li>
        <li class="available2">2b</li>
    </ul>
    
    <ul>
        <li class="available3">3a</li>
        <li class="available3">3b</li>
    </ul>
</div>

<div id="selected">
    <ul id="selected1"></ul>  
    <ul id="selected2"></ul> 
    <ul id="selected3"></ul>
</div>

CSS

div{ float: left; }
#selected ul { height: 40px; margin: 5px }

ul {width: 100px; padding: 10px;}
.available1, #selected1 {background: salmon;}
.available2, #selected2 {background: pink;}
.available3, #selected3 {background: darksalmon; cursor: move;}


ul li{
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

JavaScript

$('.available1').draggable({
    revert: 'invalid',
    scope: '1',
    stack: '#selected1',
    start: function(event, ui) {  },
    connectToSortable: '#selected1'
});
$('.available2').draggable({
    revert: 'invalid',
    scope: '2',
    connectToSortable: '#selected2'
});
$('.available3').draggable({
    revert: 'invalid',
    scope: '3',
    connectToSortable: '#selected3'
});



$('#selected1').droppable({
    scope: '1',
    over: function(event, ui) { ui.draggable.hide(); },
    
});
$('#selected2').droppable({
    scope: '2'
});
$('#selected3').droppable({
    scope: '3'
});
$('#selected1').sortable();
$('#selected2').sortable();
$('#selected3').sortable();