Значит, так. На этот раз мы рассмотрим сразу два способа реализации 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>
Кстати, если не поставить background-color, то панель будет прозрачной.
У нас есть страница и две панели. Что с ними делать? Нам нужно добавить к ним поведение Drag&Drop, то есть, чтобы их можно было двигать по всеёй странице.
Для этого мы добавим на страницу ещё один контрол Atlas: DragOverlayExtender.
Этот контрол является чем-то сродни AutoCompleteExtender (как мы потом узнаем, они на самом деле родня ближе чем по Controlу).
Внутри него может быть помещён (и не один) тег DragOverlayProperties (да-да, это аналог AutoCompleteProperties). В нашем случае это будет выглядеть так:
Кстати, самое интересное, что при добавлении 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. В нашем случае это объявление выглядит так: