I am making a puzzle with jQuery. I use now drag and drop. Is there also another better way? I want to link my pieces with the place i drop them. So a specific puzzle piece is linked with that specific drop place. But I don't know how I have to do that. Another problem is when I drop a piece and then I take it back to drop another, that doesn't work. I have to refresh the page so I can drop again, is there a solution for this?
<script>
$(document).ready(function() {
$("button").button({icons: {
primary: "ui-icon-gear" }});
$("img").draggable() });
$(function() {
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "img" ) ;
}
});
});
</script>
<body>
<img class="puz1.1"src="images/1.1.1.png"> </img>
<img class="puz1.1"src="images/1.1.2.png"> </img>
<img class="puz1.1"src="images/1.1.3.png"> </img>
<img class="puz1.1"src="images/1.1.4.png"> </img>
<img class="puz1.1" src="images/1.1.5.png"> </img>
<br><br>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</body>
css:
#droppable{
width: 50px;
height:50px;
margin: 0;
}
I see you are using jQuery. You might want to check out the snap-puzzle, also have a look at their Github repository. I have used this plugin a while ago and it worked as advertised.
This demo could be interesting for you if you want to go without an extra plugin. I guess I can't include their source here, but you can find it in this file.