I have a bit of code that I’ve been working on for a while now and I feel like I’m getting closer, but I’m having an issue when I drag elements from one column to another. The way it works is I have a left and right column. When you drop an item from the left to the right it’s supposed to fire an animated class. When I drag my item on the left to the right the image I want is showing up, but when I let go of the mouse button it goes away and animates the original button from the left. What I’m looking for is an if statement something like this.
If id = #music then .ondrop change class.
This is the code I’m currently using that is getting me pretty close.
$(‘#music’).droppable({activeClass:‘droppedlimusic’});
However I have 7 buttons that are all supposed to fire their own dropped event when dragged.
Here’s the JSFiddle for what I have so far. - http://jsfiddle.net/lukeslytalker/ezzy1bkg/1/
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') !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;
}
.droppedlinav{
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 !important;
-webkit-animation-timing-function: ease-in-out !important;
visibility: visible !important;
}
.droppedliweather{
height: 143px;
background-image: url('img/weather-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;
}
.droppedliphone{
height: 110px;
background-image: url('img/phone-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;
}
.droppedlimusic {
height: 168px !important;
background-image: url('img/no-clue-sm.png') !important;
width: 600px !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;
}
.droppedlicalendar{
height: 158px;
background-image: url('img/calendar-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;
}
.droppedliemail{
height: 121px;
background-image: url('img/email-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;
}
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>
Javascript
<script type="text/javascript">
var lists = [{
"listid": "#all-colls-list",
"connectid": "#coll-selected-list"
}, {
"listid": "#coll-selected-list",
"connectid": "#all-colls-list"
}];
//Apply Sort on each list
$.each(lists, function(i, list) {
$(list.listid).sortable({
connectWith: list.connectid,
opacity: 0.7,
start: function(event, ui) {
if ($(ui.item).parents('#all-colls-list').length > 0) {
$(ui.item).addClass('dropped');
} else {
$(ui.item).addClass('sorted');
}
},
stop: function(event, ui) {
if ($(ui.item).parents('#all-colls-list').length > 0) {
$(ui.item).switchClass('droppedli', 'sortedli');
} else {
$(ui.item).switchClass('droppedlimusic', 'droplimusic');
}
$(ui.item).removeClass('sorted');
$(ui.item).removeClass('dropped');
}
});
});
//Sortable Section
$(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();
},
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();
<!----------------- DROPPABLE ELEMENT ----------------->
$(init);
$('#music').droppable({activeClass:'droppedlimusic'});
function init() {
$('#music').draggable();
$('#music').droppable({
});
}
function onDrop(event)
{
var data = event.dataTransfer.getData("text/plain");
event.target.textContent = data;
event.preventDefault();
}
});
</script>