Here the coding and the view :
<head>
<title></title>
<link href="css/themes/ui-lightness/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="js/ui/jquery.ui.core.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.droppable.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>
<link href="css/demos.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#group1_a, #group1_b, #group1_c { width: 60; height: 60}
#group1_1, #group1_2, #group1_3 { width: 60; height: 60}
</style>
<script language ="javascript" charset="utf-8" type="text/javascript">
$(document).ready(function () {
$("#group1_a").draggable({ revert: "invalid" });
$("#group1_b").draggable({ revert: "invalid" });
$("#group1_c").draggable({ revert: "invalid" });
$("#group1_d").draggable({ revert: "invalid" });
$("#group1_e").draggable({ revert: "invalid" });
$("#group1_f").draggable({ revert: "invalid" });
$("#group1_g").draggable({ revert: "invalid" });
$("#group1_h").draggable({ revert: "invalid" });
$("#group1_i").draggable({ revert: "invalid" });
$("#group1_1").droppable(
{
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});
$("#group1_2").droppable(
{
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});
$("#group1_3").droppable(
{
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});
$("#group1_4").droppable(
{
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});
$("#group1_5").droppable(
{
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});
$("#group1_6").droppable(
{
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});
});
</script>
<style type="text/css">
.style1
{
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="style1">
<div class="style1">
<br />
WELCOME TO 3 MATCHING PICTURES GAME
</div>
<div id="text" class="style1">
<br />
IMAGE AREA
<br />
</div>
<img src="images/group1/group1_a.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_a" />
<img src="images/group1/group1_b.jpg" width='60' height='60' alt='group1_b' class="box" id="group1_b" />
<img src="images/group1/group1_c.jpg" width='60' height='60' alt='group1_c' class="box" id="group1_c" />
<p>
<img src="images/group1/group1_d.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_d"/>
<img src="images/group1/group1_e.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_e"/>
<img src="images/group1/group1_f.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_f"/>
</p>
<p>
<img src="images/group1/group1_g.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_g"/>
<img src="images/group1/group1_h.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_h"/>
<img src="images/group1/group1_i.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_i"/>
</p>
</div>
<div class="style1">
<br />
PAIR 1
<br />
<img src="" width='60' height='60' alt='' class="box1" id="group1_1" />
<img src="" width='60' height='60' alt='' class="box1" id="group1_2"/>
<img src="" width='60' height='60' alt='' class="box1" id="group1_3"/>
<br />
PAIR 2
<br />
<img src="" width='60' height='60' alt='' class="box1" id="group1_4" />
<img src="" width='60' height='60' alt='' class="box1" id="group1_5"/>
<img src="" width='60' height='60' alt='' class="box1" id="group1_6"/>
<br />
<asp:Button ID="Button1" runat="server" Text="REGISTER" />
<br />
</div>
</form>
</body>
</html>
Next step : Database and how to connect with server ^_@
