jQuery 可拖动的问题

Question

我无法让下面循环中的最后一个可拖动项目变为可拖动（最后一个项目之前的所有其他项目都很好，它们都是可拖动的）。当我查看源代码时，它输出到我的浏览器的最后一个可拖动项目的 html 看起来很好，除了最后一个可拖动项目之外，“ui-draggable”类没有附加到 div （当使用 firebug 进行查看时）。有什么想法吗？谢谢

            <?php foreach ($categorySliderImages->result() as $idx => $row): ?>
            <li>
            <div class="slider">
            <div class="slide">
                <h2><?= $row->Header ?></h2>
                <div><?= $row->Teaser ?></div>
                <p><a href="/products/product/<?= $row->PID; ?>/<?= $row->FID; ?>">Click Here</a> for more information</p>
            </div>
            <?php $subImages = $this->products_model->get_category_slider_images($row->PID); ?>
            <?php foreach ($subImages->result() as $idx2 => $row): ?>
            <div id="catdraggable<?= $row->IID ?>" style="position: absolute; top:<?= $row->SliderTop ?>px; left:<?= $row->SliderLeft ?>px;">
                <img src="/FLPRODIMGS/thumb/<?= $row->Name ?>" />
            </div>                 
            <script type="text/javascript">
                $(function () {
                    $("#catdraggable<?= $row->IID ?>").draggable({
                        stop: function (event, ui) {
                            p = $("#catdraggable<?= $row->IID ?>").position();
                            $.post("/admin/set_slider_image_position", {
                                id: '<?= $row->IID ?>',
                                top: p.top,
                                left: p.left,
                                context: 'cat'
                            })
                        }
                    });
                });
            </script>

            <?php endforeach; ?>
            </div>
            <?php endforeach; ?>
            </li>

Answer 1

我不知道这是否会解决您的问题，但至少它会稍微减少页面的大小：不要为每个循环迭代重复脚本，而是将其移到 foreach 之外，并添加一个类您想要使其可拖动的 div。
类似于：

<div class="yourclass" data-yourid="<?= $row->IID ?>" id="catdraggable<?= $row->IID ?>" style="position: absolute; top:<?= $row->SliderTop ?>px; left:<?= $row->SliderLeft ?>px;">

data-yourid 属性，以便您稍后可以读取它，并且它是有效的 HTML5。
最后，以下脚本（仅一次，即在 endforeach 之后）：

$(function () {
    $(".yourclass").draggable({
        stop: function (event, ui) {
            p = $(this).position();
            $.post("/admin/set_slider_image_position", {
                id: $(this).attr("data-yourid"),
                top: p.top,
                left: p.left,
                context: 'cat'
            })
        }
    });
});

Answer 2

尝试将目标可拖动元素包含在包含 div 中，并让 jQuery 引用它。这使您的声明更加清晰：

    <div id="draggable">
        <div id="drag-<?= $row->IID ?>" style="position: absolute; top:<?= $row->SliderTop ?>px; left:<?= $row->SliderLeft ?>px;">
            <img src="/FLPRODIMGS/thumb/<?= $row->Name ?>" />
        </div>
    </div>

然后您可以在 jQuery 声明中得到以下内容：

$(function () {
       $("#draggable div").draggable({
              stop: function (event, ui) {
                    p = ui.position;
                    $.post("/admin/set_slider_image_position", {
                                id: ui.helper[0].id,
                                top: p.top,
                                left: p.left,
                                context: 'cat'
                    })
               }
       });
});