2015-05-14 94 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找到它。