📄 dragdropimage.aspx
字号:
<%@ Page language="c#" Codebehind="DragDropImage.aspx.cs" AutoEventWireup="false" Inherits="Example_12_26.DragDropImage" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Example_12_26：在网页上实现托动和拉动功能</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<LINK href="Style/StyleSheet.css" rel="stylesheet">
<script language="javascript">
function setStatusMessage(msg)
{
window.status = msg;
}
function removeStatusMessage()
{
window.status = '';
}
</script>
<!--------- Drag and Drop JavaScript ------------>
<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 < 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();
}
}
</script>
<!--------- End of Drag and Drop JavaScript ------------>
</HEAD>
<BODY>
<form id="frmSpecStorage" method="post" runat="server">
<p>
<table align="center" width="90%">
<tr>
<td align="center">
<asp:Label id="lblHeader" runat="server" Font-Bold="True" Font-Size="Large" ForeColor="Navy">在网页上实现托动和拉动功能</asp:Label></td>
</tr>
</table>
</p>
<table align="center" width="90%">
<tr>
<td bgColor="beige"><asp:Label id="Label1" runat="server" Width="200px"># 容器网格的个数（长）X:</asp:Label>
<asp:TextBox id="txtContX" runat="server">5</asp:TextBox></td>
<td> </td>
</tr>
<tr>
<td bgColor="turquoise"><asp:Label id="lblContY" runat="server" Width="200px"># 容器网格的个数（宽）Y:</asp:Label>
<asp:TextBox id="txtContY" runat="server">5</asp:TextBox></td>
<td> </td>
</tr>
<tr>
<td align="left">
<asp:Button id="btnDrawContainers" runat="server" Text="显示容器"></asp:Button>
<asp:Button id="btnSubmit" runat="server" Text="确 认" Visible="False"></asp:Button></td>
<td>
<asp:Button id="Button1" runat="server" Text="重画图像" Visible="False"></asp:Button> </td>
</tr>
<tr>
<td colspan="2">
<asp:RegularExpressionValidator id="RegularExpressionValidator1" runat="server" ErrorMessage="输入不合法，只能为数字，请重新输入！"
ControlToValidate="txtContX" ValidationExpression="\d+" Display="Dynamic"></asp:RegularExpressionValidator>
<asp:RegularExpressionValidator id="RegularExpressionValidator2" runat="server" ErrorMessage="输入不合法，只能为数字，请重新输入！"
ControlToValidate="txtContY" ValidationExpression="\d+" Display="Dynamic"></asp:RegularExpressionValidator>
</td>
</tr>
</table>
<p>
<table align="center" width="90%">
<tr>
<td>容器：第一个箱子</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><asp:Image id="Image1" runat="server" Visible="False"></asp:Image>
<asp:Table id="Table1" runat="server" BorderWidth="3" BorderStyle="Solid" BorderColor="#003366"></asp:Table></td>
</tr>
</table>
</p>
<p>
<table align="center" width="90%">
<tr>
<td width="75">尾：</td>
<td></td>
</tr>
<tr>
<td style="BACKGROUND-COLOR: beige" width="75">满：</td>
<td></td>
</tr>
<tr>
<td style="BACKGROUND-COLOR: turquoise" width="75">空</td>
<td></td>
</tr>
</table>
</p>
<DIV class="clsDragWindow" id="DW" align="center" noWrap><FONT face="宋体"></FONT></DIV>
</form>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -