DnD: сортировка в DoJo
В одном из постов про DoJo один из посетителей этого блога попросил привести пример того, как вытаскивать порядок сортировки элементов с помощью расширения Dojo – DnD, т.е. drag’n’drop. Сегодня попытаюсь об этом рассказать.
Данный модуль DoJo позволяет перемещать элементы вверх/вниз в списке не перезагружая самой страницы, на которой расположен этот список.
Пример можно посмотреть здесь.
Не буду рассматривать здесь все тонкости этого модуля. Их возможно рассмотреть самостоятельно, обратившись на официальный сайт DoJo. Также не буду здесь рассказывать о взаимодействии всего этого дела через ajax с php-скриптом, который сохраняет порядок сортировки элементов, к примеру, в какой-то таблице базы данных. А просто покажу, как можно определить порядок элементов, зная id каждого элемента.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo DnD test</title>
<style type="text/css">
@import "css/dojo.css";
@import "css/dndDefault.css";
body {
padding: 1em;
background: #ededed;
}
.container {
width: 100px;
display: block;
}
.clear {
clear: both;
}
</style>
<script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true"></script>
<script type="text/javascript" src="dojo/dnd/Container.js"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.dnd.Source");
function init(){
// событие бросания объекта
dojo.subscribe("/dnd/drop", function(source, nodes, copy, target) {
// извлекаем список всех элементов сортируемого списка
nodes = target.getAllNodes();
// формируем строку для вывода
str = '';
for (i = 0; i < nodes.length; i++) {
str += 'id: ' + nodes[i].id + '; pos: ' + i + '\n';
}
alert(str);
});
};
dojo.addOnLoad(init);
</script>
</head>
<body>
<h1 class="testTitle">Dojo DnD test</h1>
<div id="dragLists">
<div style="float: left; margin: 5px;">
<h3>Items</h3>
<!-- Список элементов -->
<div dojoType="dojo.dnd.Source" class="container">
<div class="dojoDndItem" id="dojoDndItem_1">Item <strong>Alpha</strong></div>
<div class="dojoDndItem" id="dojoDndItem_2">Item <strong>Beta</strong></div>
<div class="dojoDndItem" id="dojoDndItem_3">Item <strong>Gamma</strong></div>
<div class="dojoDndItem" id="dojoDndItem_4">Item <strong>Delta</strong></div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
Суть здесь в том, что мы присваиваем каждому элементу в списке свой идентификатор, который можно вытащить, например, из той же базы данных. В итоге мы имеем список элементов, которые можно перемещать куда угодно по вертикали (сортировать). После каждого перемещения срабатывает событие, по которому мы можем выполнить любой js-код (наприме, сохранить через ajax этот порядок сортировки, передав его php-скрипту). Естественно, можно это делать и не после каждого перемещения 
Этот работающий пример можно скачать здесь и посмотреть демо здесь.
Уверен, что этот небольшой пример сможет быть развитым кем-то до более-менее приличного компонента какой-то прилично-большой системы
Читайте также:
Работаем с формами в DoJo В предыдущей статье про DoJo ...- Ajax в Dojo Сегодня мы рассмотрим, как пользоваться ...
- DoJo: еще один JavaScript нового поколения Сегодня мы рассмотрим новую и ...
- Голосование на AJAX своими руками Сегодня немного отвлечемся от рефакторинга ...
AJAX, AJAH, AHAH и AJAJ
Ну вот, наконец, и добрался ...
Безкликовая навигация на jquery.
Не так давно я наткнулся ...- AJAXовый редактор для комментариев В одной из прошлых статей ...
- Google AJAX Search API. Руководство. Продолжаю тему Google AJAX API. ...
- Google AJAX API Многие уже слышали про эту ...
Октябрь 19th, 2008
Интересненько
Ноябрь 4th, 2008
спасибо за статью! правда с своими силами уже этот вопрос порешал, но спасибо
Июль 5th, 2009
Спасибо за статью.
Скажите в чем различия (простота осовоения и функционал) между Dojo, Jquery и Ext JS.
Меня интересует ответ в направлении что стоит начать изучать первым.
Июль 6th, 2009
Антон, я думаю, все три фреймворка одинаково хороши, но советовал бы начать изучать с jQuery или Dojo, т.к. с Ext JS знаком только по наслышке и не взялся бы советовать Вам ее.
Июль 6th, 2009
спасибо