Pozdrav!
Imam nekoliko ikona na stranici koje mogu seliti i koje kad se puste na pravu sliku trebaju promjeniti "visibility" kvačice u vidljivo odnosno kad se ispuste na pogrešnu sliku promijeniti "visibility" x-a u vidljivo. Jquery bi elemente koje ispuštam i one na koje oni padaju trebao razlikovat po ID-u jer sam im da nazive ID-a sukladno tome kamo spadaju. Za sada se samo znak X-a pojavljuje kao da je sve pogrešno.
Ovo je kod:
<!doctype html>
<html lang="hr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$(".draggable").draggable();
$(".droppable").droppable();
$(".correct").hide();
$(".wrong").hide();
});
</script>
</head>
<center>
<img src="image/box.png" height="48" width="48" class="draggable" id="bijele"/> <img src="image/can.png" height="48" width="48" class="draggable" id="nar"/>
<img src="image/bottle.png" height="48" width="48" class="draggable" id="nar"/> <img src="image/milk.png" height="48" width="48" class="draggable" id="nar"/><br/> <br/>
<img src="image/leaves.jpg" height="48" width="48" class="draggable" id="zel"/> <img src="image/news.jpg" height="48" width="48" class="draggable" id="bijele"/>
<br/><br/><br/><br/>
<img src="image/nar.png" height="184" width="145" class="droppable" id="nar"/>
<img src="image/bijele.png" height="184" width="145" class="droppable" id="bijele"/>
<img src="image/zel.png" height="184" width="145" class="droppable" id="zel"/><br/><br/>
<img src="image/correct.png" height="48" width="48" class="correct"/><img src="image/wrong.png" height="48" width="48" class="wrong"/>
</center>
<script type="text/javascript">
$(".droppable").droppable ({
drop: function() {
if($(".draggable").attr("id")==$(".droppable").attr("id")) {
$(".wrong").hide();
$(".correct").show();
} else {
$(".correct").hide();
$(".wrong").show();
}
}
});
</script>
</html>
Hvala!
