2015-05-14 166 views
2

我正在與jQuery拼圖。 我現在使用拖放。還有更好的方法嗎? 我想把我的作品與我放置它們的地方聯繫起來。所以一個特定的拼圖片與特定的放置位置相關聯。但我不知道我該怎麼做。 另一個問題是,當我放下一塊,然後我把它放回另一塊,這是行不通的。我必須刷新頁面才能再次丟棄,是否有解決方案?如何刪除照片

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

回答

3

我看到你使用的是jQuery。你可能想看看snap-puzzle,也看看他們的Github repository。前段時間我使用過這個插件,它的工作原理和廣告一樣。

This demo對您而言可能是件有趣的事,如果您想要不帶額外插件的話。我想我不能在這裏包括他們的來源,但你可以在this file找到它。