Аспект поведения «перетащить-и-отпустить»

В отличие от аспекта поведения щелчка, описанного выше, аспект поведения «перетащить?и?отпустить» (drag?and?drop), входящий в пакет Futures, не имеет самоописательного имени, такого как DragDropBehavior или похожего на него. Вместо этого он введен под именем FloatingBehavior. Особенность «перетащить?и?отпустить» довольно широко используется современными веб?порталами, но она не входит в состав библиотеки PreviewScript.js, которая распространяется вместе с пакетом ASP.NET AJAX Futures CTP. Эта функциональность реализована в дополнительном файле PreviewDragDrop.js (от термина «DragDrop»).

Реализовать возможность буксировки элементов интерфейса с помощью ASP.NET AJAX довольно просто. Прежде всего, вам потребуется элемент ASP.NET AJAX Panel – панель, которая будет буксироваться. HTML-элемент
работал бы как и раньше, но при этом Panel позволяет разместить внутри все, что угодно, в чем вы сейчас убедитесь.

В этом примере мы будем использовать панель для создания небольшого прямоугольника, имитирующего дисплей, который отображает число входящих сообщений:
(asp:Panel CssClass="mailbox" ID="DragPanel" runat="server")


You currently have (/asp:Label)
e?mail messages in your (a href="http://www.hotmail.com/")inbox(/a).


(/asp:Panel)

В данном случае «ящик для входящих сообщений» будет содержать случайное число новых сообщений электронной почты (примерно так отображается число сообщений в экране регистрации Windows XP).

Ниже приводится фрагмент, который генерирует случайное число для отображения:


CSS-класс mailbox, на который ссылается элемент управления Panel, не содержит ничего экстраординарного, он должен включать лишь определение толщины рамки и ширину прямоугольника.


Теперь осталось добавить в xml?script элемент и связать его с панелью.


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


Полный программный код страницы приводится в примере 16.2.
Пример 16.2. Добавление аспекта поведения «перетащить?и?отпустить» к панели
DragDrop.aspx
<%@ Page Language="C#" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1?transitional.dtd">
ASP.NET AJAX


(body)
(asp:ScriptManager ID="ScriptManager1" runat="server")

(asp:ScriptReference name="PreviewScript.js"
assembly="Microsoft.Web.Preview" /)
(asp:ScriptReference name="PreviewDragDrop.js"
assembly="Microsoft.Web.Preview" /)

(/asp:ScriptManager)
(asp:Panel ID="ContentPanel" CssClass="box" runat="server"_

My Portal



Welcome to your personal portal, powered by Microsoft ASP.NET AJAX.
The mail status window is freely draggable.


Welcome to your personal
portal, powered by ASP.NET AJAX.
The mail status window is freely draggable. Welcome to your personal
portal, powered by ASP.NET AJAX.
The mail status window is freely draggable.


[...]
(/asp:Panel)
(asp:Panel CssClass="mailbox" ID="DragPanel" runat="server")


You currently have
mails in your inbox.


(/asp:Panel)


(/body)


Запустите пример и посмотрите, как выглядит страница в окне броузера. Вы можете отбуксировать прямоугольник в любое место внутри породившей его страницы и оставить его там (но вы не можете, например, отбуксировать панель в нижнюю часть окна, расположенную за пределами HTML-разметки страницы).


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

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

Статьи из раздела ASP.NET AJAX на эту тему:
Аспект поведения щелчок
Индивидуализация поведения «перетащить-и-отпустить»
Использование аспектов поведения
Использование компонента Timer
Использование компонентов