DnD: сортировка в DoJo

В одном из постов про DoJo один из посетителей этого блога попросил привести пример того, как вытаскивать порядок сортировки элементов с помощью расширения Dojo - DnD, т.е. drag’n’drop. Сегодня попытаюсь об этом рассказать.

Данный модуль DoJo позволяет перемещать элементы вверх/вниз в списке не перезагружая самой страницы, на которой расположен этот список.

Пример можно посмотреть здесь.

Не буду рассматривать здесь все тонкости этого модуля. Их возможно рассмотреть самостоятельно, обратившись на официальный сайт DoJo. Также не буду здесь рассказывать о взаимодействии всего этого дела через ajax с php-скриптом, который сохраняет порядок сортировки элементов, к примеру, в какой-то таблице базы данных. А просто покажу, как можно определить порядок элементов, зная id каждого элемента.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://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-скрипту). Естественно, можно это делать и не после каждого перемещения :)

Этот работающий пример можно скачать здесь и посмотреть демо здесь.

Уверен, что этот небольшой пример сможет быть развитым кем-то до более-менее приличного компонента какой-то прилично-большой системы :)



Теги:


Читайте также:



5 Ответов на “DnD: сортировка в DoJo”

  1. DiG

    Интересненько

  2. spry

    спасибо за статью! правда с своими силами уже этот вопрос порешал, но спасибо

  3. Антон

    Спасибо за статью.

    Скажите в чем различия (простота осовоения и функционал) между Dojo, Jquery и Ext JS.

    Меня интересует ответ в направлении что стоит начать изучать первым.

  4. novice

    Антон, я думаю, все три фреймворка одинаково хороши, но советовал бы начать изучать с jQuery или Dojo, т.к. с Ext JS знаком только по наслышке и не взялся бы советовать Вам ее.

  5. Антон

    спасибо


© Copyright. . I-Novice. All Rights Reserved. Terms | Site Map