jQuery Draggable的问题

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'
                    })
               }
       });
});