Пример реализации операции «перетащил и бросил» в дереве

Эти методы являются настолько общими, что они могут передаваться диджиту Tree на этапе конструирования, что особенно замечательно, так как позволяет максимально использовать существующую реализацию в dijit._tree. Теперь настало время для еще одного примера.

Возьмем за основу пример 15.9 и дополним его возможностью перемещать элементы дерева мышью. Чтобы минимизировать прилагаемые для этого усилия, будем опираться на шаблонную реализацию dijit._tree. Кроме того, обратите внимание, что нам придется отказаться от механизма ItemFileReadStore и задействовать ItemFileWriteStore, так как сама природа операции перетаскивания не предполагает доступ только для чтения.

Чтобы пример не противоречил здравому смыслу, нам необходимо предотвратить возможность сброса элементов на другие элементы, так как элементы по своей сути отличаются от категорий элементов, как мы их определили в уже описанном ранее хранилище dojo.data. Реализация приводится в примере 15.11.
Пример 15.11. Простое дерево с возможностью перетаскивания элементов
<html>
<head>
<title>Drag and Droppable Tree Fun!</title>
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" />
<script
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js"
djConfig="parseOnLoad:true,isDebug:true">
</script>
<script type="text/javascript">
dojo.require("dijit.Tree");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit._tree.dndSource");
dojo.require("dojo.parser");
dojo.addOnLoad(function() {
//связать обработчик checkItemAcceptance...
dijit.byId("tree").checkItemAcceptance = function(target,
source) {
//преобразовать цель (узел DOM) в узел дерева
//и затем получить элемент данных
var item = dijit.getEnclosingWidget(target).item;
//запретить сброс в корневой (сфабрикованный) узел
//и не допускать сброс на элементы, не являющиеся
//категориями
return (item.id != "root" && item.type == "category");
}
});
</script>
</head>
(body class="tundra")
<div dojoType="dojo.data.ItemFileWriteStore" jsId="dataStore"
url="./programmingLanguages.json"></div>
<div dojoType="dijit.tree.ForestStoreModel" jsId="model"
store="dataStore" query="{type:'category'}" rootId="root"
rootLabel="Programming Languages"></div>
<div id="tree" dojoType="dijit.Tree" model="model"
dndController="dijit._tree.dndSource"></div>
(/body)
</html>


Когда у вас появится потребность реализовать возможность перетаскивания элементов внутри диджита Tree, стоит потратить некоторое время на изучение шаблонной реализации в dijit._tree. Любой случай применения механизма перетаскивания обычно имеет свои особенности, поэтому вероятность найти готовое решение, не требующее приложения дополнительных усилий, близка к нулю.
Теги:
Виджеты приложения
Добавлено: 25 Июля 2018 07:32:26 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...