Перетащить-и-отпустить

Реализация техники перетащить-и-отпустить (drag-and-drop) считается одной из самых сложных задач для разработчиков на JavaScript.

Поддержкой техники перетащить-и-отпустить обладают все броузеры, но слишком велики различия в тонкостях ее реализации для разных типов броузеров. К счастью, в состав пакета ASP.NET AJAX Control Toolkit входит расширитель DragPanel, который дополняет компонент ASP.NET Panel возможностью «перетаскивания». Чтобы сделать элементы доступными для перетаскивания, достаточно просто поместить их в элемент и добавить в страницу компонент DragPanelExtender. Затем требуется задать следующие свойства элемента-расширителя:
TargetControlID
Значение атрибута ID элемента Panel
DragHandleID

Значение атрибута ID элемента, выступающего в роли «рукоятки», за которую можно будет «ухватиться» мышью (в идеале должен размещаться внутри перетаскиваемой панели)
В примере 11.5 имеется две панели: одна содержит некоторый текст, а другая содержит информацию о получении случайного числа новых писем в почтовом ящике. Эта вторая панель может перетаскиваться мышью благодаря использованию элемента управления DragPanelExtender.
Пример 11.5.


Создание «перетаскиваемой» панели
DragPanel.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: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 Microsoft ASP.NET AJAX.
The mail status window is freely draggable. 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 Microsoft ASP.NET AJAX.
The mail status window is freely draggable. 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 Microsoft ASP.NET AJAX.
The mail status window is freely draggable.



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 Microsoft ASP.NET AJAX.
The mail status window is freely draggable. Welcome to your personal
portal, powered by Microsoft ASP.NET AJAX.
The mail status window is freely draggable.


(/asp:Panel)
(asp:Panel CssClass="mailbox" ID="DragPanel" runat="server")
class="mailboxHeader">New mail!


You currently have (asp:Label id="inbox"
runat="server")(/asp:Label)
mails in your (a href="http://www.hotmail.com/")inbox(/a).


(/asp:Panel)
TargetControlID="DragPanel" DragHandleID="DragPanelHandle" />


(/body)
.



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

Статьи из раздела ASP.NET AJAX на эту тему:
Воспроизведение сложных анимационных эффектов
Основы анимации
Платформа создания анимационных эффектов
Программирование анимационных эффектов
События для запуска анимации