Сортировка jQuery не работает с div

#javascript #jquery #jquery-ui #jquery-ui-sortable

#javascript #jquery #jquery-пользовательский интерфейс #jquery-ui-сортируемый

Вопрос:

Пытаюсь использовать jQuery sortable.js на серии divs, поступающих из базы данных, но при попытке перетаскивания ничего не происходит!

JS-код:

 <script>
    $(function() {
    $( ".menu" ).sortable({
    items:'.menuSort'
        });
    });
</script>
  

Основной код:

  <div class="menu">
    <?php
    foreach($data as $head){
    ?>
    <div id="header_<?php echo $head->id ?>" class="menuSort">
        <h2 class="menuHeadTitle">
            <?php 
            echo $head->name;
            ?>
        </h2>
        <p class = "menuHeadDescription">
            <?php 
            echo $head->description;
        ?>
        </p>
        <br/>
        <div class="menuHeadItems">
            <?php
            foreach($head->items as $item){
            ?>
                <div class="menuItem";
                    <p class="itemName">
                        <?php 
                        echo $item->name;
                        ?>
                    </p>
                    <p class="itemPrice">
                        <?php 
                        echo $item->price;
                        ?>
                    </p>
                    <p class="itemDescription">
                        <?php 
                        echo $item->description;
                        ?>
                    </p>
                    <br/>
                </div>
            <?php 
            }
            ?>
        </div>
    </div>
    <?php 
    }
    ?>  
</div>
  

Страница предназначена для меню ресторана: для каждого заголовка (Starter, Main и т. Д.) Должен быть div с вложенным div для каждого блюда под каждым заголовком. Я пытаюсь (на данный момент) отсортировать заголовки и надеюсь, что блюда тоже будут сортироваться, но ничего не происходит при нажатии и перетаскивании на любой из заголовков (ну, я выбираю текст — но это не совсем то, что я хочу).

Пробовал оба jQuery 1.11 и 1.10 безрезультатно.

РЕДАКТИРОВАТЬ: думаю, это может быть как-то связано с осями z, но я попытался увеличить заголовок div до 10000 на z-xis и до сих пор безрезультатно.

РЕДАКТИРОВАТЬ 2: Скрипка здесь: http://jsfiddle.net/SBN84 /

Комментарии:

1. можете ли вы создать скрипку с сгенерированным html?

2. Я не использовал fiddle — попробую настроить это сейчас. Будет ли это работать с php или я должен предоставить образцы данных? РЕДАКТИРОВАТЬ: Подождите — только что получил информацию о «сгенерированных» данных. Ого. Теперь об этом.

3. Просто получите сгенерированный html-код с панели инструментов / консоли разработчика браузеров. Таким образом, у вас есть день, чтобы поиграть. Fiddle — очень простой и полезный инструмент для тестирования.

4. Ха-ха, это потрясающе! Скрипка здесь: jsfiddle.net/SBN84 Это синие части, которые я хотел бы иметь возможность переставлять.

5. Проверьте это: jsfiddle.net/SBN84/5

Ответ №1:

Основываясь на вашей скрипке, вот обновленная скрипка. В основном вам нужно было выбрать версию jquery, пользовательский интерфейс jquery. Обратите внимание, что > это не обязательно.

 $(function () {
    $(".menu").sortable({
        items: '> .menuSort'
    });
});
  

Комментарии:

1. Идеально! Теперь он работает нормально (также есть подпункты, которые можно сортировать и перемещать между каждым заголовком: D). Спасибо за вашу помощь!

2. Это не работает для меня. Я полагаю, что моя проблема может заключаться в том, где разместить код jquery и какую версию jquery я использую. Любая помощь?