Makale Özeti

Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden DragPaneel Extender kontrolünü inceleyeceğiz.

Makale

AJAX DragPanel Extender

DragPanel Extender WenForm üzerindeki kontrolleri web form üzerinde başka bir yere sürüklenmesini sağlar. DragPanel Panel nesnesini hedef alır ve “Drag Handle” gibi kullanmak için kontrole eklenen ek paramatreler alır.

Bu kontrolü özellikle web sayfalarımızın reklam bannerlarında kullanırız. Buda sitemize hareketlilik kazandırır. Bende bu makalemde bu nesneniyi reklam banner örneğini kullanarak anlatacağım.

Kullanımı:

<ajaxToolkit:DragPanelExtender
ID="DPE1" runat="server"
TargetControlID="Panel3"
DragHandleID="Panel4"  />

Özellikleri:

•    TargetControlID – Taşınacak olan Panel’in ID’si
•    DragHandleID – Taşınacak panel için Taşınacağı panelin ID’si. Kullanıcı paneli bu panelin içerisinde bi yere taşıyabilecek.

Örnek:
Evet arkadaşlar örneğimizde Reklam bannerlerini form üzerinde ordan oraya taşıyacağız  : )

İlk olarak bir AJAX projesi açalım.


 
Daha Sonra sayfamıza 2 adet panel ekleyelim ve içerisine reklamını aldığımız firmanın logosunu koyalım. Ayrıca bir adet de DragPanel Extender nesnesi ekleyelim.
Benim yaptığım form aşağıdaki gibidir.


 
Panel için yazdığım kodlar;

  
  <asp:Panel ID="Panel1" runat="server" Direction="LeftToRight" HorizontalAlign="Left"
                ScrollBars="Horizontal" Width="100%" Height="800px">           
                    <asp:Panel ID="Panel3" runat="server" BorderStyle="Solid" BorderWidth="2px" Width="242px">
                        &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
                        <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="Small"
                            Text="Kurtlar Vadisi Terör" ForeColor="#C00000"></asp:Label>
                        <br />
                        <br />
                        &nbsp; &nbsp;
                        <asp:Image ID="Image1" runat="server" ImageUrl="~/70866.jpg" /><br />
                        <br />
                </asp:Panel>
       </asp:Panel>

Panelimizi yani reklam bannerimizi taşınabilir hale getirelim.


<cc1:DragPanelExtender ID="DragPanelExtender11" runat="server"  DragHandleID="Panel1"
             TargetControlID="Panel3" />

Şimdi projemizi çalıştıralım.
 


Reklam bannerimizi taşıyalım;


 
Evet reklam bannerimizi ordan oraya savurduk : )

Bu makalenin de sonuna geldik, başka bir makalede görüşmek üzere başarı ve iyi günler dilerim.

Sem GÖKSU

MCP | MCAD.NET | MCTS

Örnek Kodlar için mail adresimi kullanabilirsiniz

askisem@hotmail.com

Kaynaklar
http://ajax.asp.net