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.
<HEAD> of your <HTML>.
DrawContainers method to the code-behind of the web page.
click event for the button calls the DrawContainers method. or
This is the JavaScript that enables the drag and drop to take place:
<!--------- 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 ------------>
This is the code behind used to create the drag and drop objects:
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);
}
}
The click event of the button:
private void btnDrawContainers_Click(object sender, System.EventArgs e)
{
// Draw the containers.
this.DrawContainers();
}
| You must Sign In to use this message board. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ition. The window status (window.status = 'Top=' + obj.style.top + ' Left=' + obj.style.left) is displaying correct coordinates so the object's position should be updated. Do you have an ideea of what can be the cause of this problem ?