DnD: сортировка в DoJo
В одном из постов про DoJo один из посетителей этого блога попросил привести пример того, как вытаскивать порядок сортировки элементов с помощью расширения Dojo – DnD, т.е. drag’n’drop. Сегодня попытаюсь об этом рассказать.
Данный модуль 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-скрипту). Естественно, можно это делать и не после каждого перемещения 
Этот работающий пример можно скачать здесь и посмотреть демо здесь.
Уверен, что этот небольшой пример сможет быть развитым кем-то до более-менее приличного компонента какой-то прилично-большой системы
Октябрь 19th, 2008
Интересненько
Ноябрь 4th, 2008
спасибо за статью! правда с своими силами уже этот вопрос порешал, но спасибо
Июль 5th, 2009
Спасибо за статью.
Скажите в чем различия (простота осовоения и функционал) между Dojo, Jquery и Ext JS.
Меня интересует ответ в направлении что стоит начать изучать первым.
Июль 6th, 2009
Антон, я думаю, все три фреймворка одинаково хороши, но советовал бы начать изучать с jQuery или Dojo, т.к. с Ext JS знаком только по наслышке и не взялся бы советовать Вам ее.
Июль 6th, 2009
спасибо