jQuery Draggable

by Francis Rodrigues

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<ul id="draggable">
    <li>Hello</li>
    <li>Stack</li>
    <li>Overflow</li>
</ul>

<ul class="sortable"></ul>
<ul class="sortable"></ul>
<ul class="sortable"></ul>

CSS

#draggable, .sortable {
    float: left;
    width: 100px;
    margin: 30px;
}

#draggable li, .sortable li {
    margin-top: 5px;
    background-color: #aaa;
}
.sortable {
    border: 1px solid red;
    width:100px;
    height:100px;
}

JavaScript

$(function() {
    var transferred = false;
    $('#draggable li').draggable({
        connectToSortable: '.sortable',
        helper: 'clone',
        start: function(event, ui) {
            $(this).hide();
        },
        stop: function(event, ui) {
            if (!transferred)
                $(this).show();
            else {
                $(this).remove();
                transferred = false;
            }
        }
    });
    $('.sortable').sortable({
        receive: function(event, ui) {
            transferred = true;
        }
    });
});