Click here to Skip to main content
15,861,168 members
Articles / Web Development / ASP.NET
Article

ASP.NET - Drag and Drop on a Webpage

Rate me:
Please Sign up or sign in to vote.
4.49/5 (29 votes)
28 Dec 20041 min read 365.2K   12.4K   123   59
Drag and drop contained objects on a webpage.

Introduction

Many web applications are required to be complex yet intuitive to the user. One way to achieve this is to create objects or areas of the web page draggable and droppable. Unfortunately, ASP.NET server controls do not have the Drag events and DragEventArgs. Fortunately, there is a way to enable drag and drop functionalities within a web page. Now keep in mind, this is not like a Windows application where you can drag files from the user's PC to the application. The drag and drop is limited to the boundaries of the web page.

Using the code

  1. Create a web application within your solution.
  2. Create a web page.
  3. Add the provided JavaScript in the <HEAD> of your <HTML>.
  4. Add two textboxes and a button in the web form.
  5. Add the DrawContainers method to the code-behind of the web page.
  6. Ensure that the click event for the button calls the DrawContainers method.

or

  • Download the source code and run the sample application.

JavaScript

This is the JavaScript that enables the drag and drop to take place:

JavaScript
<!--------- Drag and Drop 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 < 10)
    {
        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="beige";
        }
        else
        {
            oTarget.style.backgroundColor = "turquoise";
        }
        
        if(oEl.innerHTML != "")
        {
            oEl.style.backgroundColor = "beige"
        }
        else
        {
            oEl.style.backgroundColor = "turquoise"
        }
    }
    
    killTimer();
    
    obj.style.display    = "none";
    oEl                    = null;
    oTarget                = null;
    beginDrag            = false;
    TimerID                = 0;
}


function CancelDrag()
{
    if (beginDrag == false)
    {
        killTimer();
    }
}
<!--------- End of Drag and Drop JavaScript ------------>

C# code behind - DrawContainers method

This is the code behind used to create the drag and drop objects:

C#
private void DrawContainers()
{
    TableRowCollection trCol = this.Table1.Rows;
    TableRow tr = null;
    
    // Should we continue?
    if(this.txtContX.Text == null || this.txtContY.Text == null)
        return;
    
    // Size of the row.
    int rowSize = Int32.Parse(this.txtContX.Text); 
    // Number of rows.
    int rowNumber = Int32.Parse(this.txtContY.Text);
    // Total number of containers.
    int numberOfContainers = rowSize * rowNumber;
    // Boolean value for empty table cells.
    bool isEmpty = false;
    
    // Loop through all of the containers.
    for(int i=0; i< numberOfContainers; i++)
    {
        // new row mod.
        int newRow =  i % rowSize;
        
        // Should we create a new row?
        if(tr == null || newRow == 0)
        {
            tr = new TableRow();
            trCol.Add(tr);
        }

        // Empty cell generator.
        if((i+1)%17==0)
        {
            isEmpty = true;
        }
        else
        {
            isEmpty = false;
        }

        // Set the cell collection.
        TableCellCollection tdc = tr.Cells;

        // Create a new table cell.
        TableCell td = new TableCell();
        td.ID = "cell_" + i.ToString();
        
        // Set the cell backcolor.
        td.BackColor = Color.Turquoise;
        // Set the cell's class.
        td.CssClass = "SpecimenLoc";

        td.Attributes.Add("SpecimenId", "");

        // Is the cell empty?
        if(!isEmpty)
        {
            td.Attributes.Add("SpecimenId", i.ToString());
            td.BackColor = Color.Beige;
            td.Text = i.ToString();
        }
        
        // Add javascript attributes to the cell.
        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(35);
        td.Height = Unit.Pixel(35);

        // Add the cell to the cell collection.
        tdc.Add(td);
    }
}

C# code behind - button click event

The click event of the button:

C#
private void btnDrawContainers_Click(object sender, System.EventArgs e)
{
    // Draw the containers.
    this.DrawContainers();
}

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Generaltextbox Pin
Member 21566323-Aug-05 10:39
Member 21566323-Aug-05 10:39 
GeneralRe: textbox Pin
Kenneth Young3-Aug-05 10:52
Kenneth Young3-Aug-05 10:52 
Questiondocument.all(&quot;DW&quot;) - ? Pin
Anonymous20-Jul-05 19:03
Anonymous20-Jul-05 19:03 
AnswerRe: document.all(&quot;DW&quot;) - ? Pin
Kenneth Young21-Jul-05 2:26
Kenneth Young21-Jul-05 2:26 
GeneralListBox Pin
alandrizh12-Jul-05 6:13
alandrizh12-Jul-05 6:13 
GeneralMissing Zip File Pin
sserx7-Mar-05 23:16
sserx7-Mar-05 23:16 
GeneralRe: Missing Zip File Pin
Kenneth Young5-May-05 9:17
Kenneth Young5-May-05 9:17 
QuestionWhat is document.all(&quot;DW&quot;)? Pin
Joe Don Mitchell2-Mar-05 9:07
Joe Don Mitchell2-Mar-05 9:07 
What should document.all("DW") correspond to on a page implementing this?

... the zip file on the download link points to the wrong file ...



Thanks!
AnswerRe: What is document.all(&quot;DW&quot;)? Pin
Kenneth Young2-Mar-05 11:52
Kenneth Young2-Mar-05 11:52 
GeneralRe: What is document.all(&quot;DW&quot;)? Pin
Joe Don Mitchell3-Mar-05 4:10
Joe Don Mitchell3-Mar-05 4:10 
GeneralUsing Datagrid Pin
Ajit Ober17-Feb-05 8:13
sussAjit Ober17-Feb-05 8:13 
GeneralRe: Using Datagrid Pin
Kenneth Young17-Feb-05 8:32
Kenneth Young17-Feb-05 8:32 
GeneralRe: Using Datagrid Pin
Ajit Ober17-Feb-05 9:38
sussAjit Ober17-Feb-05 9:38 
GeneralRe: Using Datagrid Pin
Kenneth Young18-Feb-05 9:17
Kenneth Young18-Feb-05 9:17 
GeneralRe: Using Datagrid Pin
Anonymous28-Feb-05 4:07
Anonymous28-Feb-05 4:07 
GeneralRe: Using Datagrid Pin
Anonymous28-Feb-05 5:36
Anonymous28-Feb-05 5:36 
GeneralRe: Using Datagrid Pin
Ajit Ober28-Feb-05 8:44
sussAjit Ober28-Feb-05 8:44 
GeneralRe: Using Datagrid Pin
Ajit Ober28-Feb-05 8:46
sussAjit Ober28-Feb-05 8:46 
QuestionFirefox? Pin
iverns14-Feb-05 23:51
iverns14-Feb-05 23:51 
AnswerRe: Firefox? Pin
Kenneth Young15-Feb-05 2:28
Kenneth Young15-Feb-05 2:28 
GeneralRe: Firefox? Pin
williaml22-Feb-05 12:34
williaml22-Feb-05 12:34 
GeneralImage in TD Pin
arobadol6-Jan-05 1:28
arobadol6-Jan-05 1:28 
GeneralRe: Image in TD Pin
Kenneth Young7-Jan-05 8:20
Kenneth Young7-Jan-05 8:20 
QuestionOnDrop Event? Pin
FrEaK_CH28-Dec-04 10:09
FrEaK_CH28-Dec-04 10:09 
AnswerRe: OnDrop Event? Pin
Kenneth Young28-Dec-04 10:25
Kenneth Young28-Dec-04 10:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.