Atlas, первые шаги. Drag & Drop
Сегодня мы продолжаем серию статей, посвященных использованию MS Atlas, микрософтовской реализации AJAX, и публикуем статью про использование Drag & Drop, написанную уважаемым для .
Значит, так. На этот раз мы рассмотрим сразу два способа реализации Drag&Drop на странице.
Способ №1
Сначала мы рассмотрим стандартный способ. Создайте новую страничку. Далее необходимо заполнить её контентом - дело в том, что панели "ездят", то есть двигаются только внутри самой страницы (что понятно), а посему не могут двигаться там, где страницы уже нет . Как вариант - сделать большой div и запихнуть всё в него. Я лично для просмотра границ всяких div'ов пользую Web Developer Toolbar - хороший плагин для Firefox.
Допустим, у нас есть заполненная страничка. Теперь нужно проделать довольно-таки стандартную процедуру - поместить на страницу ScriptManager. Думаю, это Вы умеете. Теперь давайте сделаем две панельки.
Красивыми они у нас не будут - я сейчас не в настроении пускаться в дизайнерские изыски:
<asp:Panel ID="FirstPanel" runat="server" CssClass="floatPanel">
<asp:Label ID="FirstLabel" runat="server" Text="Это область, которую можно таскать мышкой :)" />
</asp:Panel>
<asp:Panel ID="SecondPanel" runat="server" CssClass="floatPanel">
<asp:Label ID="SecondLabel" runat="server" Text="Это область, которую можно таскать мышкой :)" />
</asp:Panel>Теперь объявим класс CSS floatPanel:
.floatPanel
{
cursor:move;
background-color:#a50;
border-style:solid;
border-width:1px;
height:160px;
width:160px;
}Кстати, если не поставить background-color, то панель будет прозрачной.
У нас есть страница и две панели. Что с ними делать? Нам нужно добавить к ним поведение Drag&Drop, то есть, чтобы их можно было двигать по всеёй странице.
Для этого мы добавим на страницу ещё один контрол Atlas: DragOverlayExtender.
Этот контрол является чем-то сродни AutoCompleteExtender (как мы потом узнаем, они на самом деле родня ближе чем по Control'у).
Внутри него может быть помещён (и не один) тег DragOverlayProperties (да-да, это аналог AutoCompleteProperties). В нашем случае это будет выглядеть так:
<atlas:DragOverlayExtender ID="MyDragOverlayExtender" runat="server">
<atlas:DragOverlayProperties TargetControlID="FirstPanel" Enabled="True" />
<atlas:DragOverlayProperties TargetControlID="SecondPanel" Enabled="True" />
</atlas:DragOverlayExtender>Кстати, самое интересное, что при добавлении extender'а на страницу у панели появляется свойство DragOverlay с теми же параметрами - оно связывается с DragOverlayProperties.
Вот и готова наша страница! Теперь две панели могут перемещаться по всей области страницы.
Способ №2
Этот способ подразумевает наличие у Вас Atlas Controls Toolkit, о котором я говорил несколькими постами выше.
Он является более удобным и совершенным.
Давайте чуточку видоизменим панели. Для начала, уберите из стиля строку
cursor:move;Мы сделаем так, чтобы двигать панель можно было только за определённый участок.
Добавим по "заголовку" в панели:
<asp:Panel ID="FirstPanel" runat="server" CssClass="floatPanel">
<asp:Label ID="FirstHeader" runat="server" Text="Тащи за меня" CssClass="panelHeader" />
<br />
<asp:Label ID="FirstLabel" runat="server" Text="Здесь находится содержание панели" />
</asp:Panel>
<asp:Panel ID="SecondPanel" runat="server" CssClass="floatPanel">
<asp:Label ID="SecondHeader" runat="server" Text="Тащи за меня" CssClass="panelHeader" />
<br />
<asp:Label ID="SecondLabel" runat="server" Text="Здесь находится содержание панели" />
</asp:Panel>Собственно, объявим класс CSS panelHeader так:
.panelHeader
{
font-weight:bold;
cursor:move;
}Это будет та область, за которую можно "таскать" мышкой панель.
Ну и самое главное - необходимо объявить DragPanelExtender из Atlas Control Toolkit. В нашем случае это объявление выглядит так:
<atlasToolkit:DragPanelExtender ID="MyDragPanelExtender" runat="server">
<atlasToolkit:DragPanelProperties TargetControlID="FirstPanel" DragHandleID="FirstHeader" />
<atlasToolkit:DragPanelProperties TargetControlID="SecondPanel" DragHandleID="SecondHeader" />
</atlasToolkit:DragPanelExtender>Всё очень просто. Вот мы и познакомились с техникой создания Drag&Drop на странице.
Полный код страницы (я пишу только для варианта № 2, для первого надо чуть изменить):
<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drag&Drop</title>
<style type="text/css">
.floatPanel
{
background-color:#a50;
border-style:solid;
border-width:1px;
height:160px;
width:160px;
}
.panelHeader
{
font-weight:bold;
cursor:move;
}
</style>
</head>
<body>
<form id="mainForm" runat="server">
<div id="content" style="text-align: center;">
<atlas:ScriptManager ID="MyScriptManager" runat="server" />
<asp:Panel ID="FirstPanel" runat="server" CssClass="floatPanel">
<asp:Label ID="FirstHeader" runat="server" Text="Тащи за меня" CssClass="panelHeader" />
<br />
<asp:Label ID="FirstLabel" runat="server" Text="Здесь находится содержание панели" />
</asp:Panel>
<asp:Panel ID="SecondPanel" runat="server" CssClass="floatPanel">
<asp:Label ID="SecondHeader" runat="server" Text="Тащи за меня" CssClass="panelHeader" />
<br />
<asp:Label ID="SecondLabel" runat="server" Text="Здесь находится содержание панели" />
</asp:Panel>
<atlasToolkit:DragPanelExtender ID="MyDragPanelExtender" runat="server">
<atlasToolkit:DragPanelProperties TargetControlID="FirstPanel" DragHandleID="FirstHeader" />
<atlasToolkit:DragPanelProperties TargetControlID="SecondPanel" DragHandleID="SecondHeader" />
</atlasToolkit:DragPanelExtender>
Здесь должен находиться контент страницы
</div>
</form>
</body>
</html>До скорых встреч!
Еще об этом: