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>

...全文

194 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>

nexus3.7z.001

代码下载链接： https://pan.quark.cn/s/a4b39357ea24 !!! IMPORTANT !!! The Generated subdirectory contains source that is generated by a tool. Any changes to this source will be lost the next time the tool is run. The script to generate the source can be found at %SDXROOT%\Windows\Wcp\Mil\CodeGen\GenerateFiles.cmd. Documentation for the tool is located at http://wiki/default.aspx/Microsoft.Projects.Avalon.MilCodeGen.

已经博主授权,源码转载自 https://pan.quark.cn/s/f622e58236ee 运用Mahony算法对IMU（集成三轴磁力计）所产生数据执行姿态估算，相关说明完备且易于理解。

内容概要：本文研究了光伏与储能系统在配电网中的双层优化配置问题，旨在解决分布式能源的选址与定容难题。通过构建双层优化模型，上层以系统综合成本最小为目标进行光伏和储能的选址定容，下层以最优潮流计算评估方案的运行效果，实现规划与运行的协同优化。研究采用Matlab进行代码实现，并复现了SCI一区论文的先进算法，有效提升了配电网对分布式能源的接纳能力，降低了网络损耗，提高了电压稳定性。该方法为高比例可再生能源接入背景下的配电网规划提供了科学的技术支撑。; 适合人群：具备电力系统基础知识，从事新能源、配电网规划、优化算法研究的科研人员及工程师，以及电气工程、自动化等相关专业的研究生。; 使用场景及目标：① 掌握双层优化模型在电力系统规划中的建模思想与求解技巧；② 学习先进的智能优化算法（如遗传算法、粒子群算法等）在复杂非线性问题中的应用；③ 复现高水平学术论文成果，提升科研能力和代码实现水平。; 阅读建议：此资源结合了理论模型、算法实现与工程应用，建议读者在学习时重点关注双层模型的构建逻辑、上下层之间的交互机制以及Matlab代码的具体实现流程，并尝试对不同参数和场景进行调试与仿真，以深化理解。

科易网深度探索AI技术在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景，研究科技创新领域的AI+数智化服务，推动科技创新与产业创新智能化发展。