SORTABLE + DROBBABLE - NO CSS - JQuery UI - BIZAMAJIG USAGE

by bizamajig

HTML

<div class="pipeline">
    <div class="stage">
        <div class="item">Lolcat Shirt</div>
        <div class="item">Cheezeburger Shirt</div>
        <div class="item">Buckit Shirt</div>
        <div class="item">Zebra Striped</div>
        <div class="item">Black Leather</div>
        <div class="item">Alligator Leather</div>
        <div class="item">iPhone</div>
        <div class="item">iPod</div>
        <div class="item">iPad</div>
    </div>
    <div class="stage">
        <div class="item">iPad</div>
    </div>
</div>

CSS

.pipeline {
     float:left;
     width: 500px;
     margin-right: 2em;
 }
.stage {
     width: 200px;
     float: left;
     margin-top: 1em;
 }

JavaScript

$(function () {
/*
	$( '.item' ).draggable({
        appendTo: 					'body',
        helper: 					'clone',
        connectToSortable: 			'.stage'
    });
*/
	$( '.stage' ).sortable({
        items: '.item:not(.placeholder)',
        connectWith: '.stage',
        sort: function () {
            $(this).removeClass( 'ui-state-default' );
        },
        over: function () {
            //hides the placeholder when the item is over the sortable
            $( '.placeholder' ).hide(); 
        },
        out: function () {
            if ( $(this).children( ":not(.placeholder)" ).length === 0 ) {
                // shows the placeholder again if there are no items in the list
                $( '.placeholder' ).show();
            }
        }
    });
});