Подписка на события или подключение обработчиков с помощью функций dojo.subscribe и dojo.connect выполняется так же просто, как и в случае с объектами класса Moveable.
Двинемся дальше, загрузим следующий полноценный пример и воспользуемся расширением Firebug, чтобы вывести в консоль различные темы событий, получаемых по подписке. Не забывайте, что существует возможность перетаскивать элементы из любых контейнеров Source.
<html>
<head>
<title>More Fun with Drop!</title>
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" />
<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="dndDefault.css" />
<script
type="text/javascript"
djConfig="parseOnLoad:true"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">
</script>
<script type="text/javascript">
dojo.require("dojo.dnd.Source");
dojo.require("dojo.parser");
dojo.addOnLoad(function() {
dojo.subscribe("/dnd/source/over", function(source) {
console.log("/dnd/source/over", source);
});
dojo.subscribe("/dnd/start", function(source, nodes, copy) {
console.log("/dnd/start", source, nodes, copy);
});
dojo.subscribe("/dnd/drop", function(source, nodes, copy) {
console.log("/dnd/drop", source, nodes, copy);
});
dojo.subscribe("/dnd/cancel", function() {
console.log("/dnd/cancel");
});
});
</script>
</head>
(body)
<div id="source1" dojoType="dojo.dnd.Source" class="container">
<div class="dojoDndItem">foo</div>
<div class="dojoDndItem">bar</div>
<div class="dojoDndItem">baz</div>
<div class="dojoDndItem">quux</div>
</div>
<div id="source2" dojoType="dojo.dnd.Source" class="container">
<div class="dojoDndItem">FOO</div>
<div class="dojoDndItem">BAR</div>
<div class="dojoDndItem">BAZ</div>
<div class="dojoDndItem">QUUX</div>
</div>
(/body)
</html>
Все, что требуется, чтобы продемонстрировать прямое подключение к событиям, – внести изменение в функцию addOnLoad. Поскольку в этом случае необходима ссылка на созданный объект класса Source (а не на узел DOM), нам следует программно создать объект Source и не полагаться на парсер, создающий экземпляры виджетов, определяемые разметкой страницы. Замените фрагмент программного кода, как показано ниже, выключите флаг parseOnLoad в массиве djConfig и посмотрите на результаты в консоли Firebug еще раз:
dojo.addOnLoad(function() {
//Сохранить ссылку на объект Source для выполнения соединений.
var s1 = new dojo.dnd.Source("source1");
dojo.connect(s1, "onDndSourceOver", function(source) {
console.log("onDndSourceOver for", s1, source);
});
dojo.connect(s1, "onDndStart", function(source, nodes, copy) {
console.log("onDndStart for ", s1, source, nodes, copy);
});
dojo.connect(s1, "onDndStop", function(source, nodes, copy, target) {
console.log("onDndStop for", s1, source, nodes, copy, target);
});
dojo.connect(s1, "onDndCancel", function() {
console.log("onDndCancel for ", s1);
});
});