Link 块拼图

Question

我正在用 jQuery 制作一个拼图，我使用的是可拖放的。昨天我制作了我的方块来放入我的拼图块，我试图通过使 ID 相同或 class 来 link 一个方块，但它不起作用。

有谁知道我如何 link 他们所以如果我想把一块放在那个方块上，方块只接受正确的方块？

我有 25 块和 25 个方块可以放入，5x5。

    $(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" ) ; 
           }
});
});

HTML

<img id="puz1.1.1" class="puz1.1" src="images/1.1.1.png"/>
<img class="puz1.1" src="images/1.1.2.png"/>
<img class="puz1.1" src="images/1.1.3.png"/>
<img class="puz1.1" src="images/1.1.4.png"/>
<img class="puz1.1" src="images/1.1.5.png"/>



    <div id="droppable" data="puz1.1a" class="ui-widget-header">
  </div>

 <div id="container">
        <div id="Kader">
            <table border="0">
                <tbody>
                    <tr>

<td id="puzdrop1.1a" class= "droppable ui-droppable"></td>
<td id="puzdrop1.1b" class= "droppable ui-droppable"></td>
<td id="puzdrop1.1c" class= "droppable ui-droppable"></td>
<td id="puzdrop1.1d" class= "droppable ui-droppable"></td>
<td id="puzdrop1.1e" class= "droppable ui-droppable"></td>

            </tr>
               <tr>

<td id="puz1.1.6" class= "droppable ui-droppable"></td>
<td id="puz1.1.7" class= "droppable ui-droppable"></td>
<td id="puz1.1.8" class= "droppable ui-droppable"></td>
<td id="puz1.1.9" class= "droppable ui-droppable"></td>
<td id="puz1.1.10" class= "droppable ui-droppable"></td>

            </tr>
                <tr>

<td id="puz1.1.11" class= "droppable ui-droppable"></td>
<td id="puz1.1.12" class= "droppable ui-droppable"></td>
<td id="puz1.1.13" class= "droppable ui-droppable"></td>
<td id="puz1.1.14" class= "droppable ui-droppable"></td>
<td id="puz1.1.15" class= "droppable ui-droppable"></td>

            </tr>
                        <tr>

<td id="puz1.1.16" class= "droppable ui-droppable"></td>
<td id="puz1.1.17" class= "droppable ui-droppable"></td>
<td id="puz1.1.18" class= "droppable ui-droppable"></td>
<td id="puz1.1.19" class= "droppable ui-droppable"></td>
<td id="puz1.1.20" class= "droppable ui-droppable"></td>

            </tr>
                   <tr>

<td id="puz1.1.21" class= "droppable ui-droppable"></td>
<td id="puz1.1.22" class= "droppable ui-droppable"></td>
<td id="puz1.1.23" class= "droppable ui-droppable"></td>
<td id="puz1.1.24" class= "droppable ui-droppable"></td>
<td id="puz1.1.25" class= "droppable ui-droppable"></td>

            </tr>





        </tbody>
    </table>

</div>
</div>

</div>

    #droppable{
    width: 50px;
    height:50px;
    margin: 0;  
}

.droppable{
    width:50px;
    height: 50px;
    background-color: grey;
}

#kader table td {
    width:50px;
    height: 50px;
    background-color: grey;
    margin: 0;
    padding: 0;
}
#kader {
    width: 300px;
    height: 300px;
}
#kader table {
    width:270px;
    height: 270px;
    background-color: blue;
    border-collapse: collapse;
}

Answer 1

首先：您不能有两个或更多具有相同 ID 的元素，ID 必须是唯一的。

但是您的拼图可能附加了数据：

<img id="piece_01" .. />

<td id="place_01" data="piece_01" ... />

或者反过来，将地点 ID 附加到作品中。现在您可以选取数据属性并将其与丢弃的图像 ID 等进行比较。

Link 块拼图

Link piece to square in puzzle

javascript

jquery

html

puzzle