<script type="text/javascript"> $(document).ready(function() { $(".reset").click(function() { location.reload(); }); $("img").draggable() $(".droplvl1").droppable({ drop : function(event, ui) { $(this).addClass("ui-state-highlight").find(".img") } }); }); </script> </head> <body> <h1>Jquery Puzzel</h1> <br> <a class="Levels" href="Level2.html">Level 2</a> <a class="Levels" href="Level3.html">Level 3</a> <a class="Levels" href="Level4.html">Level 4</a> <a class="Levels" href="Level5.html">Level 5</a> <br><br><br> <img id="puzlvl1.1"class="puz1"src="images/lvl1.1.jpg"> <img id="puzlvl1.2"class="puz1"src="images/lvl1.2.jpg"> <img id="puzlvl1.3"class="puz1"src="images/lvl1.3.jpg"> <img id="puzlvl1.4"class="puz1"src="images/lvl1.4.jpg"> <br><br><br> <div id="KaderLevel1"> <table id="PuzTabel"> <tr> <td id="puzdrop1.1" data="puzlvl1.1" class= "droplvl1 droppable ui-droppable"></td> <td id="puzdrop1.2" class= "droplvl1 droppable ui-droppable"></td> </tr> <tr> <td id="puzdrop1.3" class= "droplvl1 droppable ui-droppable"></td> <td id="puzdrop1.4" class= "droplvl1 droppable ui-droppable"></td> </tr> </table> </div> <br><br><br> <button class="reset"> RESET </button> <br> <br> <br> <a class="Levels" href="Puzzel.html">Home</a><br> </body> </html>
#droppable{ width: 50px; height:50px; margin: 0; } .droppable{ width:50px; height: 50px; background-color: blue; } #kader{ width: 300px; height: 300px; } #kader table{ width:270px; height: 270px; background-color: blue; border-collapse: collapse; border: 0; border-collapse: separate; border-spacing: 2px; border-color: gray; } #kader table td{ width:50px; height: 50px; background-color: blue; margin: 0; padding: 0; /*position: relative*/ } #kader table td img { width: 100%; height: 100%; } #kaderLevel1{ width:110px; height: 110px; background-color: blue; border: 0; } #PuzTabel{ border-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; } #kaderLevel1 table td{ width:50px; height: 50px; background-color: blue; margin: 0; padding: 0; position: absolute; } #kaderLevel1 table td img { width: 100%; height: 100%; }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)