ASP.NET - 在网页上实现拖放
4.49/5 (25投票s)
2004年12月28日
1分钟阅读
375521
12385
在网页上拖放包含的对象。
引言
许多 Web 应用程序需要既复杂又对用户直观。实现这一目标的一种方法是在网页上创建可拖动和可放置的对象或区域。不幸的是，ASP.NET 服务器控件没有 Drag 事件和 DragEventArgs。幸运的是，有一种方法可以在网页中启用拖放功能。请记住，这与 Windows 应用程序不同，您无法将用户 PC 上的文件拖到应用程序中。拖放仅限于网页的边界。
使用代码
- 在您的解决方案中创建一个 Web 应用程序。
- 创建一个网页。
- 将提供的 JavaScript 添加到您的
<HTML>的<HEAD>中。 - 在 Web 表单中添加两个文本框和一个按钮。
- 将
DrawContainers方法添加到网页的代码隐藏文件中。 - 确保按钮的
click事件调用DrawContainers方法。
或
- 下载源代码并运行示例应用程序。
JavaScript
这是启用拖放的 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# 代码隐藏 - DrawContainers 方法
这是用于创建拖放对象的代码隐藏文件
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# 代码隐藏 - 按钮单击事件
按钮的 click 事件
private void btnDrawContainers_Click(object sender, System.EventArgs e)
{
// Draw the containers.
this.DrawContainers();
}