Простые перемещения

Для начала рассмотрим самый простой пример, какой только возможен: попробуем организовать возможность перетаскивания объекта по экрану. Пример 7.1 демонстрирует структуру страницы с разметкой. Особое внимание обратите на выделенные строки, где присутствуют ссылки на класс Moveable, особенности которого будут рассматриваться ниже.
Пример 7.1. Простой перемещаемый объект


Fun with Moveables!

type="text/javascript"
djConfig="parseOnLoad:true,isDebug:true"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">


(body)

(/body)


Как вы уже наверняка обратили внимание, создание объекта, который можно перемещать по экрану, выглядит очень просто. После подключения ресурса Moveable к странице остается лишь с помощью атрибута dojoType определить перемещаемый элемент страницы и выполнить парсинг страницы после загрузки, добавив дополнительный параметр в массив djConfig.


В этой странице действительно нет ничего особенного, за исключением таблицы стилей, которая была создана специально, чтобы перемещаемый узел выглядел несколько иначе, чем просто фрагмент текста, хотя и обычный фрагмент текста можно перетаскивать точно так же.

Вообще говоря, все, что выполняется парсером во время загрузки страницы, можно выполнить программным способом и после загрузки страницы. Ниже приводится практически тот же самый пример, в котором перемещаемый объект создается программно:



(body)(/body)


Давайте возьмем за основу наш предыдущий пример, чтобы продемонстрировать, как можно с помощью параметра skip обеспечить возможность редактирования в текстовых элементах форм, создав на экране простой объект, имитирующий наклейку с примечанием, которую можно перемещать и текст в которой можно редактировать.


Рабочий программный код представлен в примере 7.2.
Пример 7.2. Использование функции Moveable для создания имитации наклейки с примечанием


Even More Fun with Moveables!

type="text/javascript"
djConfig="parseOnLoad:true,isDebug:true"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">


(body)




(/body)


Хотя в нашем объекте, имитирующем наклейку, совершенно необязательно определять элементручку, который можно захватить мышью, потому что внутренний элемент div и является единственной областью, которую можно передвинуть, тем не менее точно такого же эффекта можно было добиться, определив такой элемент: если отметить в объекте Moveable элемент, к которому применимо перетаскивание (связать с ним атрибут handle), то любой элемент формы, расположенный за его пределами, будет доступен для редактирования.


В этом можно убедиться, заменив строки, выделенные в предыдущем примере, следующим фрагментом:





Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
Взаимодействие со сбрасываемыми объектами
Истинная зона сброса
Координата Z
Ограничение перемещений
Перетаскивание

Вернуться в раздел: Dojo / Перетаскивание элементов