Drag, Drop, Clone & Sort

Code for my upcoming project. I'll continue to post code here until it works.

HTML

<div class="wrapper">  					     					
	<div id="togglelinks" class="left-column">
    	<ul id="sortable1" class="sortable">
      		<li class="ui-state-default"><a href=""><h1>LINK 1</h1></a></li>
        	<li class="ui-state-default"><a href=""><h1>LINK 2</h1></a></li>
        	<li class="ui-state-default"><a href=""><h1>LINK 3</h1></a></li>
        	<li class="ui-state-default"><a href=""><h1>LINK 4</h1></a></li>
        	<li class="ui-state-default"><a href=""><h1>LINK 5</h1></a></li>
        	<li class="ui-state-default"><a href=""><h1>LINK 6</h1></a></li>
        	<li class="ui-state-default"><a href=""><h1>LINK 7</h1></a></li>
      	</ul>
    	</div>      
        <div id="stage" class="right-column">
        	<ul id="sortable2" class="sortable">
            	<li class="stagearea" data-addclass="droppedmusic"><!-- Content Here --></li>
                <li class="stagearea" data-addclass="droppednav"><!-- Content Here --></li>
                <li class="stagearea" data-addclass="droppedclimate"><!-- Content Here --></li>
                <!--etc -->
            </ul>
        </div> 
	</div>
</div>

CSS

.left-column {
    width:80px;
    height:485px;
    float: left;
	text-align: center;
	opacity: 0.7;
	overflow: hidden;
}

.right-column {
    width:600px;
    height:485px;
    float: left;
    margin: 0px;
	padding: 0px;
	background: #2d2d2d;
	opacity: 0.7;
	overflow: hidden;
}

#sortable { 
    list-style-type: none; 
    float: left; 
    margin: 0px;
	padding: 0px;
}

#sortable1, #sortable2 { 
list-style-type: none; 
margin: 0; 
padding: 0; 
float: left;
}

#sortable1 li, #sortable2 li { 
margin: 0 0px 0px 0px; 
padding: 0 0px 5px 0px;   
width: 75px; 
}

body {
font-size: 62.5%;
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
}

#sortable2 li {
	overflow: hidden !important;	
	animation-name: fadeIn !important;
	-webkit-animation-name: fadeIn !important;	
	animation-duration: 1.4s !important;	
	-webkit-animation-duration: 1.4s !important;
	animation-timing-function: ease-in-out !important;	
	-webkit-animation-timing-function: ease-in-out !important;		
	visibility: visible !important;	
}
table {
font-size: 1em;
}

.ui-draggable, .ui-droppable {
background-position: top;
}

.droppedclimate{
	height: 104px;
	background-image: url('img/climate-sm.png') !important;
	width: 590px !important;	
    overflow: hidden !important;	
	animation-name: fadeIn !important;	
	-webkit-animation-name: fadeIn !important;		
	animation-duration: 1.0s !important;		
	-webkit-animation-duration: 1.0s !important;	
	animation-timing-function: ease-in-out !important;		
	-webkit-animation-timing-function: ease-in-out !important;		
	visibility: visible !important;	
}

.droppednav{
	height: 81px;
	background-image: url('img/map-sm.png') !important;
	width: 590px !important;		
    overflow: hidden !important;	
	animation-name: fadeIn !important;	
	-webkit-animation-name: fadeIn !important;		
	animation-duration: 1.0s !important;		
	-webkit-animation-duration: 1.0s !important;	
	animation-timing-function: ease-in-out...

JavaScript

//Class handler
$('#sortable2').on('droppable','.stagearea', function () {
   var $t=$(this);  //get item that was clicked on
   //read the addclass attribute and add it as a  class
   $t.addClass($t.attr('data-addclass'));
});

// Clone and Sort
$(function(){
  $("#sortable1").sortable({
    helper:"clone",
    connectWith: "#sortable2",
    start:function(event,ui){
      saveMe = $(ui.item).clone();
      startingList = $(ui.item).parent();
      $(ui.item).show();
      saveMe.insertAfter($(ui.item) ).hide();
    },
	connectWith: "ui-state-highlight",
    start:function(event,ui){
    },
    helper:"clone",
    connectWith: "#sortable2",
    start:function(event,ui){
  	  saveMe = $("#music").attr('class', 'droppedmusic');
    },
    stop: function(event, ui){
        if(startingList.attr("id") == $(ui.item).parent().attr("id") ) {
            // At this point, we've dropped it on the original list.
            //  Remove the clone we made.
            saveMe.remove();
        } else {
            // this can be done either here, or in the remove() func.
            //  I'm thinking this is more intuitive than to re-display
            //  the item in the remove func.
            saveMe.show();
        }
    }
  }).disableSelection();
  $("#sortable2").sortable({
        helper:"clone",
        start: function(event, ui){
            $(ui.item).show();
        },
    }).disableSelection();   
});