如何放下照片

Question

我正在用 jQuery 拼图。我现在使用拖放。还有另一种更好的方法吗？我想 link 我的作品放在我放下它们的地方。因此，特定的拼图块 link 与该特定的放置位置相关联。但我不知道我该怎么做。另一个问题是当我放下一块然后我把它拿回去放下另一块时，这是行不通的。我必须刷新页面才能再次删除，有解决方案吗？

<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

我看到你在使用 jQuery。您可能想查看 snap-puzzle, also have a look at their Github repository。我不久前使用过这个插件，它像宣传的那样工作。

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

javascript

jquery

html

jquery-ui

puzzle