How to Drag and Drop controls in asp.net Runtime

Question

in my application i want Drag and drop controls at runtime.. Plz help any body

kiran · Answer

Hi kamal kannan , my requirement is, list of controls are in the left side of the web page, I will drag and drop into to panel is is the same page. Like our .net editor. Is it posssible ? plz help me.

Lisa · Answer

you need to customize the drag and drop events like the mousedown, mousedrag mouse up events for the component you want to add the feature. Thanks, Lisa

kamal kannan · Answer

Hi Sathis, my requirement is, list of controls are in the left side of the web page, I will drag and drop into to panel is is the same page. Like our .net editor. Is it posssible ? plz help me.

sathish kumar · Answer

@ Page Language ="C#" MasterPageFile ="~/MasterPage.master" AutoEventWireup ="true" CodeFile ="Default.aspx.cs" Inherits ="_Default" Title ="Untitled Page" %> asp : Content ID ="Content1" ContentPlaceHolderID ="ContentPlaceHolder1" Runat ="Server"> script language ="javascript"> function setStatusMessage(msg) { window.status = msg; } function removeStatusMessage() { window.status = '' ; } script > script language ="javascript"> var TimerID = 0; var oEl = null ; var oTarget = null ; var beginDrag = false ; var tmpHTML = "" ; function killTimer() { if (TimerID != 0 ) { clearTimeout(TimerID); TimerID = 0; } } function fnShowDragWindow() { var obj = document.all( "DW" ); killTimer(); if (oEl == null ) { return ; } obj.style.top = oEl.offsetTop; obj.style.left = oEl.offsetLeft; obj.style.height = oEl.offsetHeight - 3; obj.style.width = oEl.offsetWidth - 3; obj.innerText = oEl.SpecimenId; obj.style.display = "block" ; obj.style.zIndex = 999; window.document.attachEvent( "onmousemove" , fnMove ); window.document.attachEvent( "onscroll" , fnMove ); window.document.attachEvent( "onmousemove" , fnCheckState ); window.document.attachEvent( "onmouseup" , fnRelease ); window.document.attachEvent( "onselectstart" , fnSelect ); //window.document.attachEvent("onmouseover",setTarget); beginDrag = true ; } function setTarget(id) { var src = document.getElementById(id); if (src == null ) { return ; } if (src.target == 'true' ) { oTarget = src; } else { oTarget = null ; } } function BeginDrag(id) { // Get the item to be dragged. oEl = document.getElementById(id); // Is there an item? if (oEl == null ) { return ; } tmpHTML = oEl.innerHTML; // Set the window timeout. TimerID = setTimeout(fnShowDragWindow, 1); } function fnCheckState() { if ( event .button != 1) { fnRelease(); } } function fnSelect() { return false ; } function fnMove() { if ( event .button != 1) { fnRelease(); return ; } var obj = document.all( "DW" ); obj.style.top = event .clientY - (obj.offsetHeight / 2 ) + window.document.body.scrollTop; obj.style.left = event .clientX + window.document.body.scrollLeft; window.status = 'Top=' + obj.style.top + ' Left=' + obj.style.left; if ( event .clientY > window.document.body.clientHeight - 10 ) { window.scrollBy(0, 10); } else if ( event .clientY { window.scrollBy( event .clientX, -10); } } function fnRelease() { if (beginDrag == false ) return ; window.document.detachEvent( "onmousemove" , fnMove ); window.document.detachEvent( "onscroll" , fnMove ); window.document.detachEvent( "onmousemove" , fnCheckState ); window.document.detachEvent( "onmouseup" , fnRelease ); window.document.detachEvent( "onselectstart" , fnSelect ); //window.document.detachEvent( "onmouseover", setTarget ); var obj = document.all( "DW" ); if (oTarget != null ) { var targetHTML = oTarget.innerHTML; var targetSpecId = oTarget.SpecimenId; var sourceSpecId = oEl.SpecimenId; oEl.innerHTML = targetHTML; oEl.SpecimenId = targetSpecId; oTarget.SpecimenId = sourceSpecId; oTarget.innerHTML = tmpHTML; // Is the container empty? if (oTarget.innerHTML != "" ) { oTarget.style.backgroundColor= "DimGray" ; } else { oTarget.style.backgroundColor = "DimGray" ; } if (oEl.innerHTML != "" ) { oEl.style.backgroundColor = "DimGray" } else { oEl.style.backgroundColor = "DimGray" } } killTimer(); obj.style.display = "none" ; oEl = null ; oTarget = null ; beginDrag = false ; TimerID = 0; } function CancelDrag() { if (beginDrag == false ) { killTimer(); } } script > table align ="center" > tr > td >   asp : TextBox id ="txtContX" runat ="server" Font-Bold ="True" Font-Names ="Verdana" Font-Size ="X-Small" Width ="50px" ForeColor ="Navy" Visible ="False"> 1 asp : TextBox > td > tr > tr > td >   asp : TextBox id ="txtContY" runat ="server" Font-Bold ="True" Font-Names ="Verdana" Font-Size ="X-Small" Width ="50px" ForeColor ="Navy" Visible ="False"> 5 asp : TextBox > td > tr > tr > td align ="center">   td > tr > table > asp : Table ID ="Table1" runat ="server" BorderColor ="#003366" BorderStyle ="Solid" BorderWidth ="3" Font-Bold ="True" Font-Names ="Verdana" Font-Size ="Small" > asp : Table >    div id ="DW" align ="center" class ="clsDragWindow" nowrap ="nowrap">   div > asp : Content > using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Drawing.Imaging; using System.Drawing.Text; using System.Drawing.Drawing2D; using System.Drawing.Design; using System.Text; using System.Drawing; using System.Xml; public partial class _Default : System.Web.UI. Page { protected void Page_Load( object sender, EventArgs e) { TableRowCollection trCol = this .Table1.Rows; TableRow tr = null ; if ( this .txtContX.Text == null || this .txtContY.Text == null ) return ; int rowSize = Int32 .Parse( this .txtContX.Text); int rowNumber = Int32 .Parse( this .txtContY.Text); int numberOfContainers = rowSize * rowNumber; bool isEmpty = false ; for ( int i = 1; i { int newRow = i % rowSize; if (tr == null || newRow == 0) { tr = new TableRow (); trCol.Add(tr); } if ((i + 1) % 17 == 0) { isEmpty = true ; } else { isEmpty = false ; } TableCellCollection tdc = tr.Cells; TableCell td = new TableCell (); td.ID = "Button" + i.ToString(); td.CssClass = "SpecimenLoc" ; td.Attributes.Add( "Button" , "" ); if (!isEmpty) { td.Attributes.Add( "SpecimenId" , i.ToString()); td.BackColor = Color .DimGray; td.ForeColor = Color .WhiteSmoke; if (i.ToString() == "1" ) { td.Text = "Personal Details" .ToString(); } if (i.ToString() == "2" ) { td.Text = "Family Details" .ToString(); } if (i.ToString() == "3" ) { td.Text = "Contact Details" .ToString(); } if (i.ToString() == "4" ) { td.Text = "Confirmation Details" .ToString(); } if (i.ToString() == "5" ) { td.Text = "Register Details" .ToString(); } } // for (int j = 1; j // { // if (j.ToString() == "1" && td.Text.ToString() == "Personal Details") // { // // } // if (j.ToString() == "2" && td.Text.ToString()== "Family Details") // { // // } // } td.Attributes.Add( "target" , "true" ); td.Attributes.Add( "onmousedown" , "BeginDrag(this.id);" ); td.Attributes.Add( "onmouseup" , "CancelDrag();" ); td.Attributes.Add( "onmouseover" , "setTarget(this.id);this.style.cursor='hand';" ); td.Attributes.Add( "onmouseout" , "this.style.cursor='default';" ); td.Width = Unit .Pixel(180); td.Height = Unit .Pixel(40); tdc.Add(td); } } } Try this one...it's working very fine in my application so try this one.... If u want any more help mail me ...sathish.kutty@gmail.com

Manish Dwivedi · Answer

Hi dilip, You can drag and drop the control by using the webpart.

How to Drag and Drop controls in asp.net Runtime

Answers (5)