Sortable and draggable behavior on list items

by fangyang

HTML

<div class="rightContainer">
    <div class="droppable">Playlist #1</div>
    <div class="droppable">Playlist #2</div>
    <div class="droppable">Playlist #3</div>
</div>

<ul>
    <li>Track #1</li>
    <li>Track #2</li>
    <li>Track #3</li>
    <li>Track #4</li>
    <li>Track #5</li>
    <li>Track #6</li>
    <li>Track #7</li>
</ul>

CSS

.rightContainer{
    float:right;
    width:100px;
    margin-right:50px;
}

.rightContainer .droppable{
    height:20px;
    width:100px;
    padding:10px;
    margin-bottom:5px;
    background-color:red;
}

ul{
    padding:10px;
    border:1px solid #CCC;
    width:160px;
    position:relative;
}
li{ 
    background-color:#CCC;
    padding:5px;
    list-style:none;
    width:150px;
    margin-bottom:5px;
}

.plholder{
    background-color:black; 
    height:1px;
    position:absolute;
    width:150px;
    margin-top:-5px;
}

JavaScript

// http://stackoverflow.com/questions/19427948/sortable-and-draggable-behavior-on-list-items

$(document).ready(function(){
        var draggerHelper = null;
        $("ul").sortable({ 
            items: "li",
            cursorAt: { top: -5, left: -5 },
            helper: function(){ return $("<div>I'm dragged</div>"); },
            start:function(event,ui){
                draggerHelper = $(ui.item.clone().show()).insertAfter(ui.item);
            },
            stop: function(event,ui){
                $(draggerHelper).remove();	
            },
            placeholder:"plholder",
            forcePlaceholderSize:true
        });
        
        $(".droppable").droppable({
            tolerance: "pointer",
            drop:function(){
                // You need to tell your sortable to cancel 
                // the last drag/drop interaction
                $("ul").sortable("cancel");
                alert("Do something on drop ...");   
            }
        });
    });