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(onmouseoversetTarget); 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.