Problem with jQuery Draggable

Question

I'm having trouble getting the very last draggable item in the loop below to become draggable (all the other items before the last item are fine, they are draggable). The html it's outputting to my browser for the last draggable item looks fine when I view source exept for the very last draggable, the "ui-draggable" class isnt being attached to the div (when looking with firebug). Any ideas? Thanks

            <?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

Try enclosing your target draggable elements in a containing div and have jQuery reference that. This makes your declaration a little cleaner:

    <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>

You then get this for your jQuery statement:

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

Answer 2

I don't know if this will fix your problem, but at the very least it will reduce the size of your page a little: instead of the script being repeated for each loop iteration, move it outside the foreachs, and add a class to the divs that you want to make draggable. So something like:

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

The data-yourid attribute is so you can read it later, and it's valid HTML5. And at the end, the following script (only one time, i.e. after the endforeachs):

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