Introduction

This is a control which will help you to make pages that can be made customizable 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
Microsoft is doing some thing with .armx extension. I dont know what Microsoft is doing. But here i have override 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 override System.Web.UI.WebControls.Panel Class. So user can use all the properties and methods exposed by
the Panel Class.
The control has three public properties:

Draggable - To mention the whether the panel has to made draggable or not.
PanelX - To get Panel current X coordinates.
PanelY - To get Panel current Y coordinates.

<%@ 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 a My MSN. I have added a <table> with in the Panel to get the outer structure, and another table with in that for adding the contents with in the table.

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

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

The 1st parentElement selects the <TD> and 2nd parentElement selects the <TR> and 3rd parentElement selects the <TABLE> and 4th parentElement selects the<DIV> which is rendered by Panel. You can also change the class "modhead" of the <TD> which is used drag the panel.

<%@ 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>&nbsp;</td><td class="modhead"  width=100%><asp:Label text="My Inbox" 
                cssClass="tan-bold"  runat=server/></td><td class="mod_trc" width=6>&nbsp;</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 it has as to be saved once the user has moved panel from one position to another to the database.

I have set the ConnectionString in the web.Config. The connection is created and opened in the constructor. On mouseup I have updated the X and Y position with PanelId and UserId to the database.


The table structure:
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().

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 aspx page as well as in codebehind page as usual, and make them draggable in webpage.

I have hardcoded Draggable property to true because as defult when ever the page loads I have given draggable feature to all the panels as MY MSN.  

public bool Draggable
 {
  get
  {
   return _draggable;
  }

  set
  {
   _draggable = true;
  }
 }

STEPS TO USE THE CONTROL:

1. Extract the contents the ZIP file to a virtual directory.
2. Copy the Dll to the Bin directory.
3. Create the table "TEST" with the structure mentioned above.
4. Change the ConnectionString in the web.Config file.
5. Login with any username and password (both should be same ex: USER=test PASSWORD=test)
6. Move the panels anywhere in the page.
7. 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.

 

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish