如何放照片

Question

I am making a puzzle with jQuery. 我在用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. 我看到您正在使用jQuery。 You might want to check out the snap-puzzle , also have a look at their Github repository . 您可能想看看快照，也可以看看他们的Github存储库。 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 . 我想我不能在这里包括其来源，但是您可以在此文件中找到它。

如何放照片

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-05-14 08:07:42

如何放照片

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-05-14 08:07:42

解决方案1
3 已采纳 2015-05-14 08:07:42