Главная страница статей --> Хитрости при программировании php, заметки по базам данных

Drag & Drop на AJAX

Источник: realcoding.net

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>

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



Похожие статьи:
- CSS + RSS = почти идеальный блог?
- Денвер + Ruby On Rails, мануал по установке
- Варианты настройки Ruby On Rails на максимальную производительность: mongrel vs lighttpd vs nginx
- Преимущества индексации страниц с mod_rewrite
- Как узнать сколько раз скачали ваш файл
- Как сгенерировать файл .htaccess
- Проект “Ы”, Ruby on Rails, Acts as Taggable, скорость разработки
- Что нового будет в Rails 1.1 и немного секретов Prototype.js
- PHP5 - Новые возможности PHP5-Zend Engine 2_0
- Основы безопасности при работе с MySQL в PHP
- Сжатие данных на PHP
- Использование XML в PHP
- Оптимизация программ на PHP


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |

Контакты
Редакция:
[0.001]