javascript - How to drop photo -
i making puzzle jquery. use drag , drop. there better way? want link pieces place drop them. specific puzzle piece linked specific drop place. don't know how have that. problem when drop piece , take drop another, doesn't work. have refresh page can drop again, there solution this?
<script> $(document).ready(function() { $("button").button({icons: { primary: "ui-icon-gear" }}); $("img").draggable() }); $(function() { $( "#droppable" ).droppable({ drop: function( event, ui ) { $( ) .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 using jquery. might want check out snap-puzzle, have @ github repository. have used plugin while ago , worked advertised.
this demo interesting if want go without plugin. guess can't include source here, can find in this file.
Comments
Post a Comment