פוסטים אחרונים

תגיות

על הבלוג

Fix PC Errors

ניווט

ארכיון

ASP.NET AJAX DragPanelExtender

Hi,

In this post, I will show you how to create and use the DragPanel Control of ASP.NET AJAX.

The DragPanel Control allow you to move the panel around your web page in your ASP.NET application.

So lets start with creating new AJAX Control Toolkit Web Site in your Visual Studio. In previous post Using the ASP.NET AJAX Calendar Control you can see how to install the AJAX Control Toolkit.

Create new ASP.NET AJAX Control Toolkit Web Site

The Panel Control

Lets drag a Panel Control into our page and call it PanelContainer, and in this panel drag another two panels: PanelHeader for the header, and PanelBody for the body.

The following html from specify how the Panel Container contains two embedded panels: one for the header and one for the body.

<body style="height: 100%;">
  <form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />
    <div>
      <asp:Panel ID="PanelContainer" runat="server" style="width: 200px;" BorderStyle="Double">
        <asp:Panel ID="PanelHeader" runat="server" style="width: 100%; height: 100%;">
          <div style="text-align: center">Panel Header...</div>
        </asp:Panel>
        <asp:Panel ID="PanelBody" runat="server" style="width: 100%; height: 100%; background-color: yellow">
          <br />
          Hello<br />
          There<br />
          !!<br />
        </asp:Panel>
      </asp:Panel>
    </div>
  </form>
</body>

Implement the DragPanelExtender Control

Drag a DragPanelExtender Control into the page, and specify the TargetControlID to the entire container - PanelContainer.

Also, we don't want to enable dragging from every point inside the container, but just from the header, so lets specify the DragHandleID to the PanelHeader.

The html page with the DragPanelExtender:

<body style="height: 100%;">
  <form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />
    <div>
      <ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="PanelContainer" DragHandleID="PanelHeader">
      </ajaxToolkit:DragPanelExtender>
      <asp:Panel ID="PanelContainer" runat="server" style="width: 200px;" BorderStyle="Double">
        <asp:Panel ID="PanelHeader" runat="server" style="width: 100%; height: 100%;">
          <div style="text-align: center">Panel Header...</div>
        </asp:Panel>
        <asp:Panel ID="PanelBody" runat="server" style="width: 100%; height: 100%; background-color: yellow">
          <br />
          Hello<br />
          There<br />
          !!<br />
        </asp:Panel>
      </asp:Panel>
    </div>
  </form>
</body>

Changing the Mouse Icon

For changing the mouse icon when dragging, we can use the following style:

<head runat="server">
  <title>Untitled Page</title>
  <style type="text/css">
    .dragIcon
    {
        text-align: center;
        cursor: move;
        font-weight: bold;
    }
  </style>
</head>

And add the drag icon into the div of the PanelHeader.

<asp:Panel ID="PanelHeader" runat="server" style="width: 100%; height: 100%;">
  <div class="dragIcon" style="text-align: center">Panel Header...</div>
</asp:Panel>

Conclusion

In this post you have seen how easy to add drag and drop functionality on your web page using ASP.NET AJAX DragPanelExtender.

ASP.NET AJAX DragPanelExtender Control

You can download the source code here.

פורסם: Apr 02 2008, 10:48 PM by egady | with 12 comment(s)

תגים:Ajax, ASP.NET

תוכן התגובה

Gady Elkarif's Blog כתב/ה:

Using DragPanelExtender to Drag and Drop Silverlight Control In previous post ASP.NET AJAX DragPanelExtender

# April 3, 2008 2:01 PM

Lakhwinder כתב/ה:

easy to understand example.

# May 27, 2008 1:48 PM

Sathish כתב/ה:

Can i delete a panel at run time

# February 22, 2009 10:57 AM

sathish כתב/ה:

Hi,

I want to know the id of the table cell (<td>) where the panel is droped. Is it possible?

# February 22, 2009 2:11 PM

ProgX כתב/ה:

Its intersting to know is it possible to combine with resizable control

# June 7, 2009 2:43 PM

Steve כתב/ה:

I am not satisfied with the ajax toolkit dragPanel Extender ...

I am not able to smoothly drag the panel. Many a times it comes back to its previous position instead of the point where we would like to move it.

# July 20, 2009 12:20 PM

shikha כתב/ה:

it is good..

can u tell how to retain panels position after post back?

# August 4, 2009 12:03 PM

wethecom כתב/ה:

re:steve it only pops back when you try to drag it farther than the form size

if it constantly pops back on you make the form size bigger to fit your needs

thats what i did to fix it..also may be effected by the div to so far as ive read

# October 17, 2009 4:58 AM

alee כתב/ה:

if I had two of these drag panels and want to organize them on page, how do I do that? I've tried to put them in a table, but the panels just end up stacking up on each other.

# October 29, 2009 10:24 PM

Nikunj כתב/ה:

Hello all....Can we restrict drag able panel to in div or some area? I mean Drag able panel should move in some fixed area, it can,t go outside that area. If its possible then please let me know the solution.

Thanks,

Regards,

Nikunj Patel

# December 24, 2009 8:55 AM

Amrit כתב/ה:

I can able to drag it but once i leave mouse button, it comes to its initial position.can any one tell whats the problem.

# January 8, 2010 2:24 PM

angela כתב/ה:

to those who cannot get the "drop" portion of the "drag-n-drop" to work:

you can only drag and drop an object within the body of the page. to help you out and physically see the area in which you can drag and drop, put a border around the body of the page:

do you notice that the border is not surrounding the objects on your webpage? then try this:

now try moving your items within the red border. as long as you drag and drop within the red border of the body, then the object will stay where it is dropped. otherwise, it will retreat to its original position.

hope this helps others.

# April 22, 2010 10:05 PM

שלח תגובה

כותרת (שדה חובה)

שם (שדה חובה)

כתובת האתר שלך (אופציונלי)

תוכן התגובה (שדה חובה)

Remember Me?

Please add 8 and 5 and type the answer here:

Enter the numbers above: