Question

我正在用jQuery制作一个Puzzle，我使用draggable和droppable。昨天我让我的方块放下我的拼图，我试图通过使ID相同或类别将一块连接到一个方块，但它不起作用。

有没有人知道如何链接它们所以如果我想在那个方块上放一块广场只接受正确的一块？

我有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等进行比较。

链接拼图中的方块

1 个答案: