怎样实现按下鼠标并拖动来画矩形框?
我想实现的功能是画出一个框来表示此区域被选中,请问怎样实现? 问题点数：20、回复次数：4Top
1 楼micker（希望下一代别再贫穷）回复于 2006-03-15 10:14:05 得分 0
没有见过现成的，自己写吧。Top
2 楼victor26（漂流纸船）回复于 2006-03-15 10:46:36 得分 10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>rect sample</TITLE>
<script Language="javascript">
var startX,startY,endX,endY;
var dragFlag;
function doMouseDown(){
dragFlag = 0;
startX = event.clientX;
startY = event.clientY;
document.all.rect.style.pixelLeft = startX;
document.all.rect.style.pixelTop = startY;
document.all.rect.style.pixelHeight = 0;
document.all.rect.style.pixelWidth = 0;
}
function doMouseUp(){
dragFlag = 1;
}
function doMouseMove(){
if(dragFlag == 0){
endX = event.clientX;
endY = event.clientY;
nowHeight = endY - startY;
nowWidth = endX - startX;
if(nowHeight<0){
document.all.rect.style.pixelTop = endY;
nowHeight = -1*nowHeight;
}
if(nowWidth<0){
document.all.rect.style.pixelLeft = endX;
nowWidth = -1*nowWidth;
}
document.all.rect.style.pixelHeight = nowHeight;
document.all.rect.style.pixelWidth = nowWidth;
}
}
document.onmousemove = doMouseMove;
document.onmousedown = doMouseDown;
document.onmouseup = doMouseUp;
</script>
<div id="rect" style="position:absolute;left:0px; top:0px;width:0;height:0;border-top: 1px dotted #999999;border-left: 1px dotted #999999;border-right: 1px dotted #999999;border-bottom: 1px dotted #999999;">
</div>
</HEAD>
<BODY>
</BODY>
</HTML>
注：以上代码只是雏形，实现了拖动矩形的功能，你可以根据自己的需要进行改动。Top
3 楼clare2003（忘情火）回复于 2006-03-15 12:01:36 得分 10
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<STYLE>
v\:* { Behavior: url(#default#VML) }
</STYLE>
<script language="JavaScript">
<!--
var x=0;
var y=0;
var isMouseDown=false;
var newRect=null;
document.onmousedown=function(){
x=window.event.clientX;
y=window.event.clientY;
isMouseDown=true;
if(newRect==null)
newRect=document.createElement('<v:rect filled="false" colors="30% yellow,70% green" style="position:absolute; top:'+ y +';left:'+ x +';width:1px;height:1px"></v:rect>');
else{
newRect.style.top=y;
newRect.style.left=x;
newRect.style.width="1px";
newRect.style.height="1px";
}
newRect.style.border="2px solid blue";//这里设置border的样式
}
document.onmousemove=function(){
if(isMouseDown==false) return;
document.body.insertBefore(newRect);
var mx=window.event.clientX;
var my=window.event.clientY;
if(mx>x){
newRect.style.width=mx-x;
}
else{
newRect.style.width=x-mx;
newRect.style.left=mx;
}
if(my>y){
newRect.style.height=my-y;
}
else{
newRect.style.height=y-my;
newRect.style.top=my;
}
}
document.onmouseup=function(){
x=0;
y=0;
isMouseDown=false;
}
//-->
</script>
</head>
<body onselectstart="return false;">
</body>
</html>Top
4 楼hungboy0（斯考）回复于 2006-03-15 13:16:26 得分 0
谢谢楼上两位,正是我想要的,非常感谢:)Top
相关问题
- 请问如何在FormView中拖动鼠标时可以拖动出一个虚线边框的矩形框？
- 怎么实现用鼠标拖一个框放大视图？使视图的放大倍数和鼠标拖动的矩形的大小成方比呢？放大后的视图的位置怎么确定呢？
- 如何定义鼠标绘制矩形框
- 怎样用鼠标拖动没有标题栏的对话框?
- 鼠标拖动的问题
- 用鼠标拖动控件
- 菜鸟问题:如何跟随鼠标拉出一虚线矩形框?
- 用鼠标按住dialog的caption然后拖动鼠标，系统会显示该dialog将会在新的位置的虚线框架，mouseup后dialog就移动到该虚线框架的位置,有没有办法不显示该虚线框架？因为我用了个多边形的dialog，虚线框架却还是原来的矩形。
- 怎么删掉拖动窗口时的虚线矩形框呢?有人知道吗?
- 无边框对话框如何在鼠标拖动边缘时改变大小?
