what I am trying to do is create a site that drags items into the drop area and once dropped that specific dragged item calls to a function thats slides in another certain div. I can not figure out why I cant get the if — else if working. My goal is to have a clean function that sees which item was dragged/dropped and depending on the dropped item I want a specific “something to happen” such as a page slide in.
here is my jquery code:
$(document).ready(function(){
var i;
var banners = ('#banners');
var tryout = ('#try2');
var navItem = [banners, tryout];
var dropItem = (".nav");
// DRAGGABLE
$(dropItem).draggable({
});
$("#dropArea").droppable({
drop: function() {
if ("dragged Item " == banners){
$(".panel").toggle("fast");
$(this).toggleClass("active")
}
else if ("dragged Item " == tryout){
// and so on...
}
}
});
});
EDIT ADDITION HERE is where I am now example here http://www.diskrim.com/tryout
$(dropItem).draggable({
});
$("#dropArea").droppable({
drop: function(event, ui) {
if (ui.draggable = navItem[0]){
alert("banners");
}
else if (ui.draggable = navItem[1]){
alert("just pop up");
}
else{
}
}
});
});
Refer to the jQuery UI Documentation
The
dropcallback takes two parameters:eventandui.ui.draggableis the item that was dragged onto the droppable area