Click here to Skip to main content
15,867,141 members
Articles / Web Development / HTML
Article

Y.A.R.D

Rate me:
Please Sign up or sign in to vote.
4.46/5 (18 votes)
21 Mar 20053 min read 61.8K   707   63   9
Yet Another Real Drag ASP.NET Draggable Panel like My MSN.

Introduction

This is a control that will help you to make pages that can be customized by the users. The control exhibits similar properties like My MSN Drag n Drop.

Background

I have seen many people posting their queries for the drag and drop feature like My MSN. Some of them have also posted that Microsoft is doing some thing with .armx extension. I don't know what Microsoft is doing. But here I have overridden the System.Web.UI.WebControls.Panel class.

This control is very easy to use. The control exposes some public properties to set the draggable feature.

Using the code

I have just overridden the System.Web.UI.WebControls.Panel class. So the users can use all the properties and methods exposed by the Panel class. The control has three public properties:

  • Draggable - To mention whether the Panel has to made draggable or not.
  • PanelX - To get Panel's current X coordinates.
  • PanelY - To get Panel's current Y coordinates.
ASP.NET
<%@ Register TagPrefix="cc1" Namespace="Drag" Assembly="Panel" %> 
<cc1:NewPanel Draggable=true id="NewPanel1" style="position:absolute;  
    width:155px; height:115px; z-index:1;" runat="server"
        cssClass="drag" align=center>
</cc1:NewPanel >

The above example is very simple. To get a look like My MSN, I have added a <table> within the Panel to get the outer structure, and another table within that for adding the contents within the table.

If this is not done then the user can drag the Panel by clicking anywhere in the Panel. This can be altered by the following line in the CS file.

C#
strRender.Append("if (event.srcElement.parentElement" + 
    ".parentElement.parentElement.parentElement.tagName==\"DIV\"){");

The first parentElement selects the <TD> and the second parentElement selects the <TR> and the third parentElement selects the <TABLE> and the fourth parentElement selects the <DIV> which are rendered by the Panel. You can also change the class modhead of the <TD> which is used to drag the Panel.

ASP.NET
<%@ Register TagPrefix="cc1" Namespace="Drag" Assembly="Panel" %> 
<cc1:NewPanel Draggable=true id="NewPanel1" 
   style="position:absolute;  width:155px; height:115px; z-index:1;"
        runat="server"  cssClass="drag" align=center>
 <table cellspacing=0 cellpadding=0 border=0 width=100% height=100%>
 <tr class="ss" height=22>
 <td class="mod_tlc" width=6> </td><td class="modhead"  
   width=100%><asp:Label text="My Inbox" 
     cssClass="tan-bold"  runat=server/></td><td class="mod_trc" 
        width=6> </td>
 </tr>   
 <tr>
 <td colspan=3>
 <table cellspacing=0 cellpadding=0 width=100% height=100%   
   class="tables"><tr><td>Your content goes here</td></tr>
 </table>
 </td>
 </tr>
 </table>
</cc1:NewPanel >

In order to remember the position of each Panel the X and Y coordinates have to be saved once the user has moved the Panel from one position to another in the database.

I have set the ConnectionString in the web.Config file. The connection is created and opened in the constructor. On mouse-up, I have updated the X and Y positions with PanelId and UserId in the database.

The table structure is as follows:

  • UserID Varchar(50)
  • PanelID Varchar(50)
  • X Int
  • Y Int

It is possible to set the X and Y coordinates for the Panel only in the CreateChildControls().

C#
this.Style.Add("Top",myReader["y"].ToString());
this.Style.Add("Left",myReader["x"].ToString());

I have attached the Style.css which I got from My MSN website. You can add anything to this Panel both in the aspx page as well as in the codebehind page as usual, and make them draggable in webpage.

I have hard coded the Draggable property to true, because by default whenever the page gets loaded, I have given the draggable feature to all the Panels as MY MSN.

C#
public bool Draggable
 {
  get
  {
       return _draggable;
  }
  set
  {
       _draggable = true;
  }
 }

Steps to use the control

  • Extract the contents of the ZIP file to a virtual directory.
  • Copy the DLL to the bin directory.
  • Create the table "TEST" with the structure mentioned above.
  • Change the ConnectionString in the web.Config file.
  • Login with any username and password (both should be same, e.g.: USER=test PASSWORD=test)
  • Move the Panels anywhere in the page.
  • Logout and login with the same username and password to see the customization.

Users can also include a PageId in the table and use the control throughout the project.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer TCS
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Generalcode chunk.. Pin
nksaroj21-Aug-06 1:00
nksaroj21-Aug-06 1:00 
Generalworks fine in a virtual directory only not in a VS.NET project Pin
dental20055-Sep-05 0:34
dental20055-Sep-05 0:34 
GeneralError Pin
madhu_r18-Aug-05 19:46
madhu_r18-Aug-05 19:46 
GeneralRe: Error Pin
Venkat Eswaran23-Aug-05 7:13
Venkat Eswaran23-Aug-05 7:13 
GeneralPanel Rendering During Design Time Pin
cmcauliffe1-Aug-05 15:39
cmcauliffe1-Aug-05 15:39 
GeneralRe: Panel Rendering During Design Time Pin
dude_401227-Nov-05 12:19
dude_401227-Nov-05 12:19 
GeneralRe: Panel Rendering During Design Time Pin
Saltire10-Dec-05 12:27
Saltire10-Dec-05 12:27 
GeneralA little help... Pin
zulfi_k14-Jun-05 5:35
zulfi_k14-Jun-05 5:35 
Hi,
Thanks for the code. I just had a question. Does this have to have a DB connection? All I need is the user to be able to rearrange the panels, but not have them stored in the DB. Now I tried getting rid of the DB calls, but what happens now is that it does the drag, but once you place it somewhere it doesn't stay there, goes back to original position. Any ideas?

Thanks.
GeneralRe: A little help... Pin
Venkat Eswaran14-Jun-05 16:14
Venkat Eswaran14-Jun-05 16:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.