How to drop photo

Question

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;  
}

Answer 1

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 .

How to drop photo

Question

1 answers

solution1
3 ACCPTED 2015-05-14 08:07:42

How to drop photo

Question

1 answers

solution1 3 ACCPTED 2015-05-14 08:07:42

solution1
3 ACCPTED 2015-05-14 08:07:42