Для начала рассмотрим самый простой пример, какой только возможен: попробуем организовать возможность перетаскивания объекта по экрану. Пример 7.1 демонстрирует структуру страницы с разметкой. Особое внимание обратите на выделенные строки, где присутствуют ссылки на класс Moveable, особенности которого будут рассматриваться ниже.
Пример 7.1. Простой перемещаемый объект
<html>
<head>
<title>Fun with Moveables!</title>
<style type="text/css">
.moveable {
background: #FFFFBF;
border: 1px solid black;
width: 100px;
height: 100px;
cursor: pointer;
}
</style>
<script
type="text/javascript"
djConfig="parseOnLoad:true,isDebug:true"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">
</script>
<script type="text/javascript">
dojo.require("dojo.dnd.Moveable");
dojo.require("dojo.parser");
</script>
</head>
(body)
<div class="moveable" dojoType="dojo.dnd.Moveable" ></div>
(/body)
</html>
Как вы уже наверняка обратили внимание, создание объекта, который можно перемещать по экрану, выглядит очень просто. После подключения ресурса Moveable к странице остается лишь с помощью атрибута dojoType определить перемещаемый элемент страницы и выполнить парсинг страницы после загрузки, добавив дополнительный параметр в массив djConfig. В этой странице действительно нет ничего особенного, за исключением таблицы стилей, которая была создана специально, чтобы перемещаемый узел выглядел несколько иначе, чем просто фрагмент текста, хотя и обычный фрагмент текста можно перетаскивать точно так же.
Вообще говоря, все, что выполняется парсером во время загрузки страницы, можно выполнить программным способом и после загрузки страницы. Ниже приводится практически тот же самый пример, в котором перемещаемый объект создается программно:
<!-- ... Обрезано ... -->
<script type="text/javascript">
dojo.require("dojo.dnd.Moveable");
dojo.addOnLoad(function() {
var e = document.createElement("div");
dojo.addClass(e, "moveable");
dojo.body().appendChild(e);
var m = new dojo.dnd.Moveable(e);
});
</script>
</head>
(body)(/body)
</html>
Давайте возьмем за основу наш предыдущий пример, чтобы продемонстрировать, как можно с помощью параметра skip обеспечить возможность редактирования в текстовых элементах форм, создав на экране простой объект, имитирующий наклейку с примечанием, которую можно перемещать и текст в которой можно редактировать. Рабочий программный код представлен в примере 7.2.
Пример 7.2. Использование функции Moveable для создания имитации наклейки с примечанием
<html>
<head>
<title>Even More Fun with Moveables! </title>
<style type="text/css">
.note {
background: #FFFFBF;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
width: 302px;
height: 300px;
margin : 0px;
padding : 0px;
}
.noteHandle {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
cursor :pointer;
background: #FFFF8F;
width : 300px;
height: 10px;
margin : 0px;
padding : 0px;
}
</style>
<script
type="text/javascript"
djConfig="parseOnLoad:true,isDebug:true"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">
</script>
<script type="text/javascript">
dojo.require("dojo.dnd.Moveable");
dojo.require("dojo.parser");
</script>
</head>
(body)
<div dojoType="dojo.dnd.Moveable" skip=true>
<div class="noteHandle"></div>
<textarea class="note">Type some text here</textarea>
</div>
(/body)
</html>
Хотя в нашем объекте, имитирующем наклейку, совершенно необязательно определять элемент ручку, который можно захватить мышью, потому что внутренний элемент div и является единственной областью, которую можно передвинуть, тем не менее точно такого же эффекта можно было добиться, определив такой элемент: если отметить в объекте Moveable элемент, к которому применимо перетаскивание (связать с ним атрибут handle), то любой элемент формы, расположенный за его пределами, будет доступен для редактирования. В этом можно убедиться, заменив строки, выделенные в предыдущем примере, следующим фрагментом:
<div id="note" dojoType="dojo.dnd.Moveable" handle='dragHandle'>
<div id='dragHandle' class="noteHandle"></div>
<textarea class="note">
This form element can't trigger drag action
</textarea>
</div>