Drag & Drop на AJAX

0 ∞
Содержание

Drag & Drop

Значит, так. На этот раз мы рассмотрим сразу два способа реализации Drag&Drop на странице.

Способ №1

Сначала мы рассмотрим стандартный способ. Создайте новую страничку. Далее необходимо заполнить её контентом - дело в том, что панели "ездят", то есть двигаются только внутри самой страницы (что понятно), а посему не могут двигаться там, где страницы уже нет smile . Как вариант - сделать большой div и запихнуть всё в него. Я лично для просмотра границ всяких div'ов пользую Web Developer Toolbar - хороший плагин для Firefox.

Допустим, у нас есть заполненная страничка. Теперь нужно проделать довольно-таки стандартную процедуру - поместить на страницу ScriptManager. Думаю, это Вы умеете smile . Теперь давайте сделаем две панельки.

Красивыми они у нас не будут - я сейчас не в настроении пускаться
в дизайнерские изыски:

<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>
Ajax для Java разработчиков: Часть 2. Cпособы сериализации данных для Ajax

Теперь объявим класс 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.

Вот и готова наша страница! Теперь две панели могут перемещаться по всей области страницы.

AJA - AJAX без XML

Способ №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>
AJAX? Atlas!

Всё очень просто smile . Вот мы и познакомились с техникой создания 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>
    .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>

До скорых встреч!