On Drop Demo

by Nate Balcom

HTML

<div class="wrapper">  					     					
	<div class="left-column">
    	<ul id="sortable1" class="sortable">
        	<li class="ui-state-default"><a href=""><img src="img/icon-music.svg" /></a></li>
        	<li class="ui-state-default"><a href=""><img src="img/icon-nav.svg" /></a></li>
        	<li class="ui-state-default"><a href=""><img src="img/icon-seats.svg" /></a></li>
        	<li class="ui-state-default"><a href=""><img src="img/icon-phone.svg" /></a></li>
        	<li class="ui-state-default"><a href=""><img src="img/icon-weather.svg" /></a></li>
        	<li class="ui-state-default"><a href=""><img src="img/icon-email.svg" /></a></li>
        	<li class="ui-state-default"><a href=""><img src="img/icon-calendar.svg" /></a></li>
      	</ul>
    </div>
    <div class="right-column">
    	<ul id="sortable2" class="sortable">
        	<li id="music" class="ui-state-highlight"></li>
        	<li id="nav" class="ui-state-highlight"></li>
        	<li id="climate" class="ui-state-highlight"></li>
        	<li id="phone" class="ui-state-highlight"></li>
        	<li id="weather" class="ui-state-highlight"></li>
        	<li id="email" class="ui-state-highlight"></li>
        	<li id="calendar" class="ui-state-highlight"></li>
      	</ul>
    </div>
</div>

CSS

#music li {
	height: 168px !important;
	width: 600px !important;
	background-image: url('img/no-clue-sm.png') !important;
	animation-name: fadeIn !important;
	-webkit-animation-name: fadeIn !important;	
	animation-duration: 0.8s !important;	
	-webkit-animation-duration: 0.8s !important;
	animation-timing-function: fadeIn !important;	
	-webkit-animation-timing-function: fadeIn !important;		
	visibility: visible !important;
}

music li {
	height: 168px !important;
	width: 600px !important;
	background-image: url('img/no-clue-sm.png') !important;
	animation-name: fadeIn !important;
	-webkit-animation-name: fadeIn !important;	
	animation-duration: 0.8s !important;	
	-webkit-animation-duration: 0.8s !important;
	animation-timing-function: fadeIn !important;	
	-webkit-animation-timing-function: fadeIn !important;		
	visibility: visible !important;
}


.left-column {
    width:60px;
	margin: 0px 0px 0px 5px;
	padding: 0px 0px 0px 0px;
    float: left;
	text-align: center;
	opacity: 0.7;
	overflow: hidden;
}

.right-column {
    width: 615px;
    height:  440px;
    float: left;
    margin: 0px 0px 0px 5px;
	padding: 10px;
	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: 0px 0px 0px 0px; 
	padding: 0px 0px 15px 0px; 
	width: 50px; 
}

#sortable2 li {
	overflow: hidden !important;	
	animation-name: fadeIn !important;
	-webkit-animation-name: fadeIn !important;	
	animation-duration: 0.8s !important;	
	-webkit-animation-duration: 0.8s !important;
	animation-timing-function: ease-in-out !important;	
	-webkit-animation-timing-function: ease-in-out !important;		
	visibility: visible !important;	
}

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

.droppedliclimate{
	height: 104px;
	background-image: url('img/climate-sm.png')...

JavaScript

$(function() {
		$("#droppable").trigger("customEvent", $("#draggable"));  
		$("#music").droppable({activeClass:"droppedlimusic"});
		$("#nav").droppable({activeClass:"droppedlinav"});
		$("#climate").droppable({activeClass:"droppedliclimate"});
		$("#phone").droppable({activeClass:"droppedliphone"});
		$("#weather").droppable({activeClass:"droppedliweather"});
		$("#email").droppable({activeClass:"droppedliemail"});
		$("#calendar").droppable({activeClass:"droppedlicalendar"});
});