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.
<%@ 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.
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
.
<%@ 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()
.
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 Panel
s as MY MSN.
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
Panel
s 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.