Question

我无法在下面的循环中获取最后一个可拖动项目变为可拖动（在最后一项之前的所有其他项目都可以，它们是可拖动的）。当我查看最后一个draggable的源exept时，它输出到我的浏览器的最后一个可拖动项的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

我不知道这是否能解决您的问题，但至少它会减少您的页面大小：而不是每次循环迭代重复脚本，将其移到foreachs之外，然后添加要使其可拖动的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'
                    })
               }
       });
});

jQuery Draggable的问题

2 个答案: