Select & Connect & Sortable

by bizamajig

HTML

<div class="leftDiv">
    <div card = "1" class="item item1">Item 1</div> 
    <div card = "2" class="item item2">Item 2</div>
    <div card = "3" class="item item3">Item 3</div>
    <div card = "4" class="item item4">Item 4</div>
    <div card = "5" class="item item5">Item 5</div>
    <div card = "6" class="item item6">Item 6</div>
</div>
<div class="rightDiv">
    
</div>

CSS

.leftDiv, .rightDiv {width:120px; float:left; border:1px solid #000; padding:5px; margin:10px; min-height:130px}
.rightDiv {margin-left:40px}

.item {height:20px; line-height:20px; text-align:center; border:1px solid #EEE; background-color:#FFF}

.helperPick {border:1px dashed red; height:20px; line-height:20px; text-align:center; width:120px}

JavaScript

$(document).ready(function(){
    $(".leftDiv .item").draggable({
        helper: function(ev, ui) {
            return "<span class='helperPick'>"+$(this).html()+"</span>";
        },
        connectToSortable: ".rightDiv"
    });
    
    $(".rightDiv").sortable({
        'items': ".item",
        'receive': function(event, ui){
            var clazz = ui.item.attr('card');
            if($('.rightDiv [card=' + clazz+']').length > 1){ //jquery ui removes ids. thats why we use card
                $('.rightDiv [card=' + clazz+']:not(:first)').remove();
                alert('you can not!');            
            }
            //else {alert('that was nice :D');}
        },               
    });        
});