jquery - 使用 php 循环处理可拖动的 jquery

Question

我有一个 php 循环，它创建了一堆填充有 MYSQL 数据的框，如下所示：

<?php
//display boxes
    while ($list = $result->fetch_assoc()) {

    ?>
        <a href="<?php echo $list['url'];?>">
            <div id="box"><h2><?php echo $list['label'];?></h2>
            </div>
       </a>
    <?php };?>

我想用 JQuery 使这些框可拖动

<script>
$(function() {
$( "#box" ).draggable();
});
</
script>

这仅允许最后一个框可拖动，因为每次通过循环时，div id 都会写入最新的 div。任何想法如何使它们都可以拖动。我假设我必须为每个框创建一个单独的 div id，然后让 JQuery 可拖动以识别它，但我不知道该怎么做。

谢谢！

Answer 1

你不能有多个相同的ID！改为上课。

此处示例：FIDDLE

php

<?php
//display boxes
    while ($list = $result->fetch_assoc()) {

    ?>
        <a href="<?php echo $list['url'];?>">
            <div class="box"><h2><?php echo $list['label'];?></h2>
            </div>
       </a>
    <?php };?>

jQuery

$(function() {
$( ".box" ).draggable();
});

Answer 2

使用class而不是id. 因为每个元素只能使用一个id，但类可以用于多个元素。试试这个：

<?php
//display boxes
while ($list = $result->fetch_assoc()) {
    ?>
    <a href="<?php echo $list['url']; ?>">
        <div class="box"><h2><?php echo $list['label']; ?></h2>
        </div>
    </a>
<?php }; ?>

<script>
    $(function() {
        $(".box").draggable();
    });
</script>

Answer 3

在一个页面中，您的 ID 应该是唯一的，因此添加一个类而不是 Id。

<div class="box"><h2><?php echo $list['label'];?></h2>
        </div>

<script>
$(function() {
$( ".box" ).draggable();
});
</
script>