ASP.NET如何用鼠标拖出虚线框，释放鼠标虚框消失，就和在windows桌面上拖动鼠标一样

deansroom 2008-12-18 03:06:02
我现在在JS里面实现鼠标拖动取两点坐标，也实现了虚线拖动，但就是两个JS我一合到一起，全部都不好使了！各位大人能不能给合到一起？非常感谢


取两点坐标代码：：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>无标题页</title>
<link href="css/css1.css" type="text/css" rel="stylesheet"/>
<script language="javascript" type="text/javascript">
function fun()
{
var x= event.x;
var y=event.y;
document.getElementById("TextBox7").value=x+","+y;
}
function fun1()
{
var x= event.x;
var y=event.y;
document.getElementById("TextBox6").value=x+","+y;
}

function DrawImage(ImgD,FitWidth,FitHeight)
{
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0)
{
if(image.width/image.height>= FitWidth/FitHeight)
{
if(image.width>FitWidth){
ImgD.width=FitWidth;
ImgD.height=(image.height*FitWidth)/image.width;
}
else
{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
else
{
if(image.height>FitHeight)
{
ImgD.height=FitHeight;
ImgD.width=(image.width*FitHeight)/image.height;
}
else
{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}

</script>

</head>
<body>
<form id="form1" runat="server" >
<div >
<div style="position:absolute;left:100px; top:300px; z-index:1; width:800px; height:800px;" ></div>
<div style="width:800px; height:800px;z-index:-100;position:absolute; left:100px; top:300px;">
<img src="image/2008.jpg" alt="2008.jpg" style="z-index:-100; display:inline;" onload="javascript:DrawImage(this,800,800);" onmouseup="fun()" onmousedown="fun1()" onmousemove="Imageonmousemove()"/></div>
<table style="width: 696px; text-align: center">
<tr>
<td style="width: 83px; text-align: left;">
<asp:Label ID="Label6" runat="server" Text="图片区域："></asp:Label></td>
<td style="width: 100px; text-align: left;">
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True" Width="156px">
</asp:DropDownList></td>
<td style="width: 100px; text-align: left">
<asp:Label ID="Label3" runat="server" Text="图片类别："></asp:Label></td>
<td style="width: 100px; text-align: left">
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" Width="153px" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Value="0">长方形</asp:ListItem>
<asp:ListItem Value="1">多边形</asp:ListItem>
<asp:ListItem Value="2">圆形</asp:ListItem>
</asp:DropDownList></td>
</tr>
<tr>
<td style="width: 83px; text-align: left;">
<asp:Label ID="Label7" runat="server" Text="图片名称："></asp:Label></td>
<td style="width: 100px; text-align: left;">
<asp:TextBox ID="TextBox2" runat="server" AutoPostBack="True"></asp:TextBox></td>
<td style="width: 100px; text-align: left">
<asp:Label ID="Label10" runat="server" Text="图片链接："></asp:Label></td>
<td style="width: 100px; text-align: left">
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 83px; text-align: left">
<asp:Label ID="Label9" runat="server" Text="图片宽度："></asp:Label></td>
<td style="width: 100px; text-align: left">
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></td>
<td style="width: 100px; text-align: left">
<asp:Label ID="Label11" runat="server" Text="开始坐标："></asp:Label></td>
<td style="width: 100px; text-align: left">
<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" Width="65px" Visible="False"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 83px; text-align: left; height: 26px;">
<asp:Label ID="Label8" runat="server" Text="图片高度："></asp:Label></td>
<td style="width: 100px; text-align: left; height: 26px;">
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></td>
<td style="width: 100px; height: 26px; text-align: left">
<asp:Label ID="Label2" runat="server" Text="结束坐标："></asp:Label></td>
<td style="width: 100px; height: 26px; text-align: left">
<asp:TextBox ID="TextBox7" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td colspan="4" style="height: 39px; text-align: center">
<asp:ImageButton ID="ImageButton1" runat="server" Height="29px" ImageUrl="~/image/save1.gif"
Width="109px" OnClick="ImageButton1_Click" />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="获取坐标" /></td>
</tr>
</table>
</div>

</form>
</body>
</html>



...全文
198 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
deansroom 2008-12-19
  • 打赏
  • 举报
 回复
完成！谢谢绑定，结贴！
deansroom 2008-12-18
  • 打赏
  • 举报
 回复
有没有自带的控件可以在鼠标拖动的时候画线呢？
wcabinboy 2008-12-18
  • 打赏
  • 举报
 回复
帮顶
deansroom 2008-12-18
  • 打赏
  • 举报
 回复
别沉啊！
deansroom 2008-12-18
  • 打赏
  • 举报
 回复
不能沉啊！
尐孑 2008-12-18
  • 打赏
  • 举报
 回复
关注
尐孑 2008-12-18
  • 打赏
  • 举报
 回复
儑
deansroom 2008-12-18
  • 打赏
  • 举报
 回复
//取鼠标拖动虚线框代码


<SCRIPT>
var x0;
var y0;
var select=false;
var lx,ly;
//取得点数
function getDim(el){
for (var lx=0,ly=0;el!=null;
lx+=el.offsetLeft,ly+=el.offsetTop,el=el.offsetParent);
return {x:lx,y:ly}
}
//鼠标点击下去
function Imagemousedown(){
x0=document.body.scrollLeft+event.clientX;// 鼠?起始横坐?
y0=document.body.scrollTop+event.clientY;// 鼠?起始?坐?
select=true;
}
//鼠标点击起来
function Imageonmouseup(){
/*
getDim(event.srcElement,"End")
lx=ex+parseInt(dd.style.height)
ly=ex+parseInt(dd.style.width)
select=false;
alert("选择的参数\r\n开始:X="+ex+"Y="+ey+"\r\n结束:X="+lx+"Y="+ly);
dd.style.display='none';
*/
select=false;
dd.style.display='none';
}
// //取消选择
// function document.onselectstart(){
// return false;
// }
// //取消移动
//function document.ondrag(){
// return false;
// }
//拖动事件
function Imageonmousemove()
{
if (select)
{
dd.style.display='';
myImgDim = getDim(document.images.MyImage);
if(document.body.scrollLeft+event.clientX-x0>0) {// 从左向右
dd.style.left=x0;
dd.style.width=document.body.scrollLeft+event.clientX-x0;
}
else {// 从右向左
dd.style.left=document.body.scrollLeft+event.clientX;
dd.style.width=x0-(document.body.scrollLeft+event.clientX);
}
if (document.body.scrollTop+event.clientY-y0>0) {// 从上向下
dd.style.top=y0;
dd.style.height=document.body.scrollTop+event.clientY-y0;
}
else {// 从下向上
dd.style.top=document.body.scrollTop+event.clientY;
dd.style.height=y0-(document.body.scrollTop+event.clientY);
}
}
}
</SCRIPT>
</head>
<body>
<table><tr><td onmousedown="Imagemousedown()" onmouseup="Imageonmouseup()" onmousemove="Imageonmousemove()" >
<img name="MyImage" src="imgs/2008.jpg" style="cursor: crosshair;" width="200" height="200" style=" display:block;" >

</td></tr></table>

<div id="dd" style="position:absolute; width:800px; height:800px; z-index:100; border:1px red dashed; display:none;"></div>
</body>
.NET图形绘制与控件拖放交互实战代码详解
set;set;set;set;} // 用于命中检测最后提醒一...所以务必做到：- 小范围资源用using- 长期资源统一管理，在Dispose中释放- 避免在循环内反复创建Pen还可以引入弱引用缓存：随控件销毁自动清理关联资源，彻底杜绝泄露。
历年计算机二级MS-Office真题及答案
那么，该用户刚才的操作是____。903、 在日常生活中，我们经常需要使用...361、 在Word 2000中，____查看方式具有“所见即所得”的效果，页眉、页脚、分栏和图文框都能显示在真实的位置上，可用于检查文档的外观。
《C#程序设计教程(第3版)[精品]》-笔记
开发在Windows 7操作系统上运行的客户端应用程序时，建议用 WPF 应用程序来实现，这样可以充分发挥GPU硬件加速的性能优势。 2016-06-28 .NET框架包括两个主要组件，一个是公共语言运行库（Common Language ...
湖南省中职学业水平测试试题信息技术
B、单击第一个文件，按住Ctrl键，单击最后一个文件 C、按住Ctrl键，按住鼠标右键逐个选取 D、按住Ctrl键，按住鼠标左键逐个选取 84、在Windows“资源管理器”中，进行文件复制可以先右击文件图标，在弹出的快捷菜单...
湖南省中职学业水平考试复习试题(计算机三)
A、键盘和鼠标 B、打印机和显示器 C、显示器和扫描仪 D、硬盘和内存 11、不属于计算机外部设备的是（ ）。 A、输入设备 B、输出设备 C、外存储器 D、主存储器 12、常用的微机输入设备通常是指（ ）。 A、...
.NET社区

62,269

社区成员

668,981

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章