Проблема с jQuery Draggable - PullRequest
Новая
       3

Проблема с jQuery Draggable

0 голосов
/ 15 ноября 2010

У меня проблемы с тем, чтобы последний перетаскиваемый элемент в цикле ниже стал перетаскиваемым (все остальные элементы перед последним элементом в порядке, они перетаскиваемы).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>

Ответы [ 2 ]

1 голос
/ 15 ноября 2010

Я не знаю, решит ли это вашу проблему, но по крайней мере это немного уменьшит размер вашей страницы: вместо того, чтобы повторять скрипт для каждой итерации цикла, переместите его за пределы 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'
            })
        }
    });
});
0 голосов
/ 15 ноября 2010

Попробуйте заключить ваши целевые перетаскиваемые элементы в содержащий 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'
                    })
               }
       });
});
...