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

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (5)