I urgently need help for a game I am making for school with javascript and jquery. Here is the deal: I had to make a magazine (online/offline) and I wanted to get an A so I went all out and made an awesome site in PS/XHTML/CSS/Jquery. In our group, we decided to get me to make a game where you drag teachers baby photos onto their current photo and a dialogue will popup if you are correct or make the pic return to it's original position if wrong. The problem: No matter how hard I try, it wont give any feedback if I dragged the photo onto anything. BTW: I am using the interface plugin for jquery (not the ui) and it screws with the accordian plugin that I got (I used a separate one for certain reasons.
Here is the script
Here is the HTML
Here is the script
Code:
$(function(){
$('.drag img').Draggable(
{
zIndex: 1000,
opacity: 0.7
}
);
$('.drop img').Droppable(
{
accept : 'drag',
activeclass: 'dropactive',
hoverclass: 'drophover',
ondrop: function (drag)
{
var dropclass = $(this).attr("class");
var dragclass = $(drag).attr("class");
if( dropclass == dragclass ){
alert("Correct!");
} else {
$(".drag ." + dragclass).css("top","0");
$(".drag ." + dragclass).css("left","0");
}
},
intersect: true
}
);
});Here is the HTML
HTML:
<div id="dragcontainer">
<div class="column drag">
<p><img src="pics/teachers/1young.png" class="1 drag" width="150" height="186" /></p>
<p><img src="pics/teachers/2young.png" class="2 drag" width="150" height="186" /></p>
<p><img src="pics/teachers/5young.png" class="5 drag" width="150" height="186" /></p>
<p><img src="pics/teachers/4young.png" class="4 drag" width="150" height="186" /></p>
<p><img src="pics/teachers/3young.png" class="3 drag" width="150" height="186" /></p>
<p><img src="pics/teachers/6young.png" class="6 drag" width="150" height="186" /></p>
<p><img src="pics/teachers/11young.png" class="11 drag" width="150" height="186" /></p>
<p><img src="pics/teachers/8young.png" class="8 drag" width="150" height="186" /></p>
<p><img src="pics/teachers/10young.png" class="10 drag" width="150" height="186" /></p>
<p><img src="pics/teachers/7young.png" class="7 drag" width="150" height="186" /></p>
<p><img src="pics/teachers/9young.png" class="9 drag" width="150" height="186" /></p>
<p> </p>
</div>
<div class="column drop">
<p><img src="pics/teachers/5old.png" class="5" width="150" height="186" /></p>
<p><img src="pics/teachers/11old.png" class="11" width="150" height="186" /></p>
<p><img src="pics/teachers/6old.png" class="6" width="150" height="186" /></p>
<p><img src="pics/teachers/10old.png" class="10" width="150" height="186" /></p>
<p><img src="pics/teachers/1old.png" class="1" width="150" height="186" /></p>
<p><img src="pics/teachers/4old.png" class="4" width="150" height="186" /></p>
<p><img src="pics/teachers/7old.png" class="7" width="150" height="186" /></p>
<p><img src="pics/teachers/2old.png" class="2" width="150" height="186" /></p>
<p><img src="pics/teachers/3old.png" class="3" width="150" height="186" /></p>
<p><img src="pics/teachers/9old.png" class="9" width="150" height="186" /></p>
<p><img src="pics/teachers/8old.png" class="8" width="150" height="186" /></p>
<p> </p>
</div>
<div class="clearer"></div>
</div>