#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 я использую. Любая помощь?