Drag & Drop на AJAX

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>

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

Всё очень просто 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 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>

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

Автор: Exception