paul85
13.12.2014 - 20:45
Всем привет!
Решил реализовать сабж. Ситуация следующая: есть некоторые блоки. В этих блоках находятся ссылки. Задача организовать сортировку блоков относительно друг друга вместе с содержимым. Но это не всё. Хочется сделать так же сортировку ссылок внутри блоков. Причем так, чтобы их можно было таскать по соседям. Плюс все это каким-то образом откидывать на backend и сохранять сотворенный юзверем порядок.
В ходе попытки решить задачу была найдена библиотека jQuery UI, в состав которой входит функция sortable. Но она вешается на ID. То есть получается мне нужно повесить один "экземпляр" на блоки, и отдельно по "экземпляру" на каждый из блоков для его контента (ссылок). Плюс связать их через connectedList или как-то так, не помню точно параметр.
Но меня терзают смутные подозрения, что это выйдет чистейшей воды говнокод.
Может быть есть получше библиотеки какие? В гугл не отсылайте - интересуют только проверенные варианты. =)
Valick
13.12.2014 - 21:02
возьми phpMyAdmin и выдерни оттуда нужный функционал
_____________
Стимулятор ~yoomoney - 41001303250491
paul85
14.12.2014 - 20:17
Ну ок, попробуем зайти с другого края. Есть вложенное меню: заголовок - айтемы. Нужно из админки каким-то образом его сортировать. Какие есть идеи по реализации интерфейса?
Placido
14.12.2014 - 20:45
Все правильно. В пример из документации (
http://jqueryui.com/sortable/#connect-lists ) нужно добавить всего лишь один див и одну строку кода, чтобы можно было перемещать сами блоки тоже
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
</head>
<body>
<div id="sortable">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</div>
</body>
</html>
Остается только по событию stop аяксом отправить новый порядок элементов на сервер и там его сохранить.