求救,高分求 可以拽div边界大小的代码。
功能象调整win窗体一样。
只要拽div边界的代码，本人有个拽大小加拖动的htc，太长读不懂
可惜才学js,要赶者交，向大家求救。
问题点数：100、回复次数：16Top
1 楼zhjzh_zjz（DreamConqueror）回复于 2003-05-22 16:48:37 得分 5
呵呵，给一点思路你看看如何：
<div style="width:100px;height:150px" contenteditable>可以进行编辑的DIV</div>Top
2 楼damomo（大漠）回复于 2003-05-22 17:34:37 得分 0
upTop
3 楼nhconch（天蝎蝴蝶）回复于 2003-05-22 17:59:55 得分 0
<html>
<head>
<title>div test</title>
<script language="javascript">
var mouseX = 0;
function divonmousemove(obj)
{
if (Math.abs(obj.offsetLeft+obj.offsetWidth-event.x)<8)
obj.style.cursor='e-resize';
else
obj.style.cursor='';
if (event.button==1)
{
obj.style.width = parseInt(obj.offsetWidth) + (event.x - mouseX);
}
}
function divonmousedown(obj)
{
mouseX = event.x;
}
function divonmouseup(obj)
{
mouseX = 0;
}
</script>
</head>
<body>
<div onmousemove="divonmousemove(this);" onmouseleave="this.style.cursor='';"
onmousedown="divonmousedown(this);" onmouseup="divonmouseup(this);"
style="width:300;background:green">
aaaaa
<div>
</body>
</html>Top
4 楼nhconch（天蝎蝴蝶）回复于 2003-05-22 18:01:32 得分 0
漏了一句，用这个：
<html>
<head>
<title>div test</title>
<script language="javascript">
var mouseX = 0;
function divonmousemove(obj)
{
if (Math.abs(obj.offsetLeft+obj.offsetWidth-event.x)<4)
obj.style.cursor='e-resize';
else
obj.style.cursor='';
if (event.button==1)
{
obj.style.width = parseInt(obj.offsetWidth) + (event.x - mouseX);
mouseX = event.x;
}
}
function divonmousedown(obj)
{
mouseX = event.x;
}
function divonmouseup(obj)
{
mouseX = 0;
}
</script>
</head>
<body>
<div onmousemove="divonmousemove(this);" onmouseleave="this.style.cursor='';"
onmousedown="divonmousedown(this);" onmouseup="divonmouseup(this);"
style="width:300;background:green">
aaaaa
<div>
</body>
</html>Top
5 楼emu（月亮不在手指尖上）回复于 2003-05-22 18:23:08 得分 0
嗯，一个不错的练习题，大家都来练练。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> resize div </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="emu">
<META NAME="Keywords" CONTENT="resize div">
<META NAME="Description" CONTENT="emu's test of resize div">
<SCRIPT LANGUAGE="JavaScript">
<!--
var startx=0;
var starty=0;
var mousePress=false;
var destElm;
var oldWidth=300;
var oldHeight=200;
var dir1=false;
var dir2=false;
function down(){
startx = event.x;
starty = event.y;
mousePress=true;
destElm=event.srcElement
oldWidth = destElm.offsetWidth;
oldHeight = destElm.offsetHeight;
dir1=(startx>destElm.firstChild.offsetWidth);
dir2=(starty>destElm.firstChild.offsetHeight);
}
function up(){
mousePress=false;
}
function move(){
if (!mousePress) return;
var d=event.x-startx+oldWidth;
if (d>0 && dir1) destElm.style.width=d;
var d=event.y-starty+oldHeight;
if (d>0 && dir2) destElm.style.height=d;
}
//-->
</SCRIPT>
</HEAD>
<BODY onmousemove="move()" onmouseup="up()">
<div style="width:300px;height=200px;background=white;cursor:hand;" onmousedown="down()" >
<div style="width:99%;height=99%;background=yellow;cursor:default">
</div>
</div>
</BODY>
</HTML>
Top
6 楼nhconch（天蝎蝴蝶）回复于 2003-05-23 09:23:26 得分 40
忘了高度了，再来：
<html>
<head>
<title>div test</title>
<script language="javascript">
var mouseX = 0;
var mouseY = 0;
function divonmousemove(obj)
{
if ((Math.abs(obj.offsetLeft+obj.offsetWidth-event.x)<4) && (Math.abs(obj.offsetTop+obj.offsetHeight-event.y)<4))
obj.style.cursor='se-resize';
else if (Math.abs(obj.offsetLeft+obj.offsetWidth-event.x)<4) obj.style.cursor='e-resize';
else if (Math.abs(obj.offsetTop+obj.offsetHeight-event.y)<4) obj.style.cursor='s-resize';
else
obj.style.cursor='';
if (event.button==1)
{
obj.style.width = parseInt(obj.offsetWidth) + (event.x - mouseX);
mouseX = event.x;
obj.style.height = parseInt(obj.offsetHeight) + (event.y - mouseY);
mouseY = event.y;
}
}
function divonmousedown(obj)
{
mouseX = event.x;
mouseY = event.y;
}
function divonmouseup(obj)
{
mouseX = 0;
mouseY = 0;
}
</script>
</head>
<body>
<div onmousemove="divonmousemove(this);" onmouseleave="this.style.cursor='';"
onmousedown="divonmousedown(this);" onmouseup="divonmouseup(this);"
style="width:300;height:200;background:green" title="按下鼠标拖动大小">
按下鼠标拖动大小
<div>
</body>
</html>
Top
7 楼tony1978（突击召唤师）回复于 2003-05-23 09:38:02 得分 0
emu(ston) 的方法不够通用,离开IE就不能用了
nhconch(海风轻拂)的方法有个大漏洞，move的时候没有判断是不是在拖动，在Opera下面就不行了。而且拖动的时候要小心翼翼的。
呵呵Top
8 楼damomo（大漠）回复于 2003-05-23 09:59:04 得分 0
对了，再加把劲，来个通用的。
Top
9 楼emu（月亮不在手指尖上）回复于 2003-05-23 10:49:31 得分 50
呵呵，考我来着？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> resize div </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="emu">
<META NAME="Keywords" CONTENT="resize div">
<META NAME="Description" CONTENT="emu's test of resize div">
<SCRIPT LANGUAGE="JavaScript">
<!--
var startx=0;
var starty=0;
var mousePress=false;
var destElm;
var oldWidth=300;
var oldHeight=200;
var dir1=false;
var dir2=false;
function down(e){
destElm=document.all?e.srcElement:e.target;
if (!destElm.firstChild) {
destElm=null;
return;
}
startx = e.clientX;
starty = e.clientY;
mousePress=true;
oldWidth = destElm.offsetWidth;
oldHeight = destElm.offsetHeight;
dir1=(startx>destElm.firstChild.offsetWidth);
dir2=(starty>destElm.firstChild.offsetHeight);
}
function up(e){
mousePress=false;
destElm=null;
}
function move(e){
if (!mousePress) return;
var d=e.clientX-startx+oldWidth;
if (d>3 && dir1) {
destElm.style.width=d;
destElm.firstChild.style.width=d-3;
if (destElm.offsetWidth<=destElm.firstChild.offsetWidth+2)
destElm.style.width = destElm.offsetWidth+3;
}
var d=e.clientY-starty+oldHeight;
if (d>3 && dir2) {
destElm.style.height=d;
destElm.firstChild.style.height=d-3;
if (destElm.offsetHeight<=destElm.firstChild.offsetHeight+2)
destElm.style.height = destElm.offsetHeight+3;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY onmousemove="move(event)" onmouseup="up(event)">
<div style="width:303px;height:203px;background-color:#CCFF66;cursor:hand" onmousedown="down(event)"><div style="width:300px;height:200px;background-color:yellow;cursor:default;overflow:hidden">test
</div>
</div>
</BODY>
</HTML>
IE5,NS6，MOZ1.3通过。
Top
10 楼damomo（大漠）回复于 2003-05-23 15:28:53 得分 0
很不错了，
但能不能再做活点，
onmousemove="move(event)" onmouseup="up(event)"
均是对body来说的，我body的这些事件另有他用
如果这些事件能attach到div就好了.Top
11 楼meizz（梅花雪）回复于 2003-05-23 15:49:49 得分 5
<div contenteditable><img border=0 src=http://expert.csdn.net/images/csdn.gif></div>Top
12 楼damomo（大漠）回复于 2003-05-23 16:30:19 得分 0
用contenteditable，我怎么选中div中的东西？Top
13 楼damomo（大漠）回复于 2003-05-23 16:33:29 得分 0
nhconch(海风轻拂)的div好象只能变小.Top
14 楼momoco（）回复于 2003-05-23 16:51:22 得分 0
to emu(ston);
你的代码我在ns4.78上试，没反应吗！Top
15 楼nhconch（天蝎蝴蝶）回复于 2003-05-23 18:02:54 得分 0
不在边上也能移Top
16 楼emu（月亮不在手指尖上）回复于 2003-05-23 18:34:00 得分 0
momoco() 没装那个版本，试不了。不过一开始也没想着兼容到它的，毕竟都多少年前的版本了。Top
