Test Case Boilerplate

Fork this way...

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<div>
    <ul id="left-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
    <ul id="right-list">
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
    </ul>
 
</div>

CSS

#left-list, #right-list {float: left; cursor: pointer;}
#left-list li, #right-list li {display: block; border: 1px solid #bada55;}

JavaScript

$(function(){
$("#left-list").sortable({
    connectWith: ['#right-list'],
    scroll: true,
    placeholder: 'ui-state-highlight',
    start: function(){
        console.log('drag');
    },
    stop: function(){
        console.log('drop');
    }
});
    
$("#right-list").sortable({ 
    connectWith: ['#left-list'],
    helperclass: 'dragged',
    scroll: true,
    placeholder: 'ui-state-highlight',
    start: function(){
        console.log('drag');
    },
    stop: function(){
        console.log('drop');
    }
});


$("ul li").click(function(){ 
    alert('click');
    var originalList = $(this).parent().attr('id');
    switch(originalList){
        case 'left-list':
            $('#right-list').append(this);
            break;

        case 'right-list':
            $('#left-list').append(this);
            break;
    }
});
});