Atlas, первые шаги. Drag & Drop

Сегодня мы продолжаем серию статей, посвященных использованию MS Atlas, микрософтовской реализации AJAX, и публикуем статью про использование Drag & Drop, написанную уважаемым Exception для форума Vingrad.

Значит, так. На этот раз мы рассмотрим сразу два
способа реализации 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:

Кстати, если не поставить background-color, то панель будет прозрачной.

У нас есть страница и две панели. Что с ними делать? Нам нужно добавить к ним поведение Drag&Drop, то есть, чтобы их можно было двигать по всеёй странице.

Для этого мы добавим на страницу ещё один контрол Atlas: DragOverlayExtender.

Этот контрол является чем-то сродни AutoCompleteExtender (как мы потом узнаем, они на самом деле родня ближе чем по Control‘у).

Внутри него может быть помещён (и не один) тег DragOverlayProperties (да-да, это аналог AutoCompleteProperties). В нашем случае это будет выглядеть так:

Кстати, самое интересное, что при добавлении extender’а на страницу у панели появляется свойство DragOverlay с теми же параметрами — оно связывается с DragOverlayProperties.

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

Способ №2

Этот способ подразумевает наличие у Вас Atlas Controls Toolkit, о котором я говорил несколькими постами выше.

Он является более удобным и совершенным.

Давайте чуточку видоизменим панели. Для начала, уберите из стиля строку

Мы сделаем так, чтобы двигать панель можно было только за определённый участок.

Добавим по «заголовку» в панели:

Собственно, объявим класс CSS panelHeader так:

Это будет та область, за которую можно «таскать» мышкой панель.

Ну и самое главное — необходимо объявить DragPanelExtender из Atlas Control Toolkit. В нашем случае это объявление выглядит так:

Всё очень просто. Вот мы и познакомились с техникой создания Drag&Drop на странице.

Полный код страницы (я пишу только для варианта № 2, для первого надо чуть изменить):

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