Ограничение перемещений

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

В состав модуля dojo.dnd включены три основных средства, позволяющие наложить ограничения на перемещение объектов: можно определить собственную функцию, реализующую ограничения, которая будет динамически вычислять границы допустимой области (объект constrainedMoveable), можно определить статические границы в момент создания перемещаемого объекта (объект boxConstrainedMoveable) и ограничить область перемещения рамками другого, родительского узла (объект parentConstrainedMoveable). Формат представления каждой разновидности допустимой области следует соглашениям. Ниже приводится измененная версия предыдущего примера с наклейками, где демонстрируется наложение ограничений посредством функции constrainedMoveable:


Moving Around

type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">


(body)






(/body)


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


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

Вариант с использованием статических границ допустимой области реализуется еще проще. Вместо функции, вычисляющей границы, нужно просто передать явные значения. Измените предыдущий пример так, чтобы превратить элемент note2 в объект boxConstrainedMoveable, как показано ниже, и посмотрите, что из этого получится:
var m2 = new dojo.dnd.move.boxConstrainedMoveable("note2",
{
handle : "dragHandle2",
box : {l : 20, t : 20, w : 500, h : 300}
});

Этот пример работает точно так же, как и прежде, за исключением того, что объект note2 нельзя переместить за определенные границы.

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

обрезано ... -->
.parent {
background: #BFECFF;
border: 10px solid lightblue;
width: 400px;
height: 700px;
padding: 10px;
margin: 10px;
}



(body)








(/body)


Особый интерес в функции parentConstrainedMoveables представляет параметр area. Для обозначения допустимой области в пределах родительского элемента можно использовать значения "margin", "padding", "content" и "border"..



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

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

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