散分100，急求。

fangxiaoan 2006-04-29 12:08:23
有这个一个需求，在页面上有两个方框，这两个方框可以拖拽。
两个方框之间有一条线，这个线连通两个方框。当拖拽这两个方框的时候，这个线始终连着两个方框的。
还有一个需求，就是当点这条线的时候，会触发我的一个方法。

哪个大哥能提供思路。
...全文
239 23 打赏 收藏 转发到动态 举报
写回复
用AI写文章
23 条回复
切换为时间正序
请发表友善的回复…
发表回复
canjianchangkong 2006-05-08
  • 打赏
  • 举报
 回复
就像uml類圖似的
yyjzsl 2006-05-08
  • 打赏
  • 举报
 回复
好几个人都有答案了，我就不多说了，^_^

路过
fosjos 2006-05-08
  • 打赏
  • 举报
 回复
mark
clare2003 2006-05-08
  • 打赏
  • 举报
 回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html xmlns:v = "urn:schemas-microsoft-com:vml"><head>

<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var currentMoveObj = null; //当前拖动对象
var relLeft; //鼠标按下位置相对对象位置
var relTop;
var tables_array=[];//表对象集合
var lines_array=[];//线条集合
var tables_lines=[];//表和线的关系

function init(flag)
{
if(flag==0)//两个表一条线的简单情况
{
tables_array=["tb1","tb2"];
lines_array=["line1"];
tables_lines[0]=[lines_array[0],tables_array[0],tables_array[1]];//line1 From tb1 to tb2
document.getElementById("tb3").style.display="none";
document.getElementById("tb4").style.display="none";
document.getElementById("line2").style.display="none";
document.getElementById("line3").style.display="none";
document.getElementById("line4").style.display="none";
}
else
{
tables_array=["tb1","tb2","tb3","tb4"];
lines_array=["line1","line2","line3","line4"];
tables_lines[0]=[lines_array[0],tables_array[0],tables_array[1]];//line1 From tb1 to tb2
tables_lines[1]=[lines_array[1],tables_array[1],tables_array[2]];//line2 From tb2 to tb3
tables_lines[2]=[lines_array[2],tables_array[0],tables_array[2]];//From, to
tables_lines[3]=[lines_array[3],tables_array[2],tables_array[3]];//From, to
}
}
function f_mdown(obj)
{
currentMoveObj = obj; //当对象被按下时，记录该对象
currentMoveObj.style.position = "absolute";
relLeft = event.x - currentMoveObj.style.pixelLeft;
relTop = event.y - currentMoveObj.style.pixelTop;

}
window.document.onmouseup = function()
{
currentMoveObj = null; //当鼠标释放时同时释放拖动对象

}
function line_move(obj)
{

if (tables_lines.length>0)
{
for(var i=0;i<tables_lines.length;i++)
{
if(tables_lines[i][1]==obj.id)
document.getElementById(tables_lines[i][0]).from=event.x+","+event.y;
else if(tables_lines[i][2]==obj.id)
document.getElementById(tables_lines[i][0]).to=event.x+","+event.y;
}
}


}
function f_move(obj)
{


if(currentMoveObj != null)
{
line_move(obj);
currentMoveObj.style.pixelLeft=event.x-relLeft;
currentMoveObj.style.pixelTop=event.y-relTop;
}
}

//-->
</SCRIPT>
</head>
<BODY onload="init(1)">


<v:line id="line1" style="position:absolute" from = "0,0" to = "400,0" strokecolor = "red" >
<v:stroke endarrow = "oval" StartArrow = "oval"></v:stroke></v:line>
<v:line id="line2" style="position:absolute" from = "400,0" to = "400,300" strokecolor = "red" >
<v:stroke endarrow = "oval" StartArrow = "oval"></v:stroke></v:line>
<v:line id="line3" style="position:absolute" from = "0,0" to = "400,300" strokecolor = "red" >
<v:stroke endarrow = "oval" StartArrow = "oval"></v:stroke></v:line>
<v:line id="line4" style="position:absolute" from = "400,300" to = "600,300" strokecolor = "red" >
<v:stroke endarrow = "oval" StartArrow = "oval"></v:stroke></v:line>
<TABLE id="tb1" width="100" border=1 onselectstart="return false" style="position:absolute;left:0;top:0" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
<TR>
<TD bgcolor="#CCCCCC" align="center"height="20" style="cursor:move">title1</TD>
</TR>
<TR>
<TD align="center" height="60">content</TD>
</TR>
</TABLE>
<TABLE id="tb2" width="100" border=1 onselectstart="return false" style="position:absolute;left:350;top:0" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
<TR>
<TD bgcolor="#CCCCCC" align="center" height="20" style="cursor:move">title2</TD>
</TR>
<TR>
<TD align="center" height="60">content</TD>
</TR>
</TABLE>
<TABLE id="tb3" width="100" border=1 onselectstart="return false" style="position:absolute;left:350;top:250" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
<TR>
<TD bgcolor="#CCCCCC" align="center" height="20" style="cursor:move">title3</TD>
</TR>
<TR>
<TD align="center" height="60">content</TD>
</TR>
</TABLE>
<TABLE id="tb4" width="100" border=1 onselectstart="return false" style="position:absolute;left:600;top:250" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
<TR>
<TD bgcolor="#CCCCCC" align="center" height="20" style="cursor:move">title4</TD>
</TR>
<TR>
<TD align="center" height="60">content</TD>
</TR>
</TABLE>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

</BODY>

babyfacelook_ly 2006-05-08
  • 打赏
  • 举报
 回复
关注加接分
zhanglemail 2006-05-08
  • 打赏
  • 举报
 回复
从没有接触过 真的学到了
xxuu503 2006-05-08
  • 打赏
  • 举报
 回复
暂时jf
左大神在这 2006-05-08
  • 打赏
  • 举报
 回复
不错,大开眼界.
ice_berg16 2006-05-03
  • 打赏
  • 举报
 回复
<html xmlns:v="urn:schemas-microsoft-com:vml">
<style>
v\:* {
behavior: url(#default#VML);
position:absolute;
z-index:1000;
}
#box1,#box2{
border:1px solid #000;
width:40px;
height:40px;
position:absolute;
z-index:0;
}
#box1{
background:#69c;
left:100px;
top:100px;
}
#box2{
background:red;
left:600px;
top:100px;
}
body{
margin:0;
}
</style>
<body>
<v:line id="line" from="0,0" to="10,10" strokecolor="black" style="visibility:hidden"><v:stroke EndArrow="Classic"/></v:line>
<div id="box1"></div>
<div id="box2"></div>
<script language="javascript">
<!--
var $ = document.getElementById;
function joinBox(){
var x1 = parseInt($('box1').style.left) + ($('box1').offsetWidth/2);
var y1 = parseInt($('box1').style.top) + ($('box1').offsetHeight/2);
var x2 = parseInt($('box2').style.left) + ($('box2').offsetWidth/2);
var y2 = parseInt($('box2').style.top) + ($('box2').offsetHeight/2);
$('line').from=x1+","+y1;
$('line').to =x2+","+y2;
}

function mouseEvent(){
this.onmousedown=function(){
this.drag=true;
this.box = this==$('box1')?$('box2'):$('box1');
this.setCapture();
var x1 = parseInt(this.currentStyle.left) + (this.offsetWidth/2);
var y1 = parseInt(this.currentStyle.top) + (this.offsetHeight/2);
$('line').from = x1+","+y1;
$('line').to = x1+","+y1;
$('line').style.visibility="visible";
}
this.onmousemove=function(){
if( this.drag )
{
$('line').to = event.clientX+","+event.clientY;
}
}
this.onmouseup =function(){
this.drag = false;
this.releaseCapture();
if( event.clientX > parseInt(this.box.currentStyle.left) &&
event.clientX < parseInt(this.box.currentStyle.left) + this.box.offsetWidth &&
event.clientY > parseInt(this.box.currentStyle.top) &&
event.clientY < parseInt(this.box.currentStyle.top) + this.box.offsetHeight )
{
var x2 = parseInt(this.box.currentStyle.left) + (this.box.offsetWidth/2);
var y2 = parseInt(this.box.currentStyle.top) + (this.box.offsetHeight/2);
$('line').to = x2 + "," + y2;
}
else
$('line').style.visibility = "hidden";
}
}
mouseEvent.call($('box1'));
mouseEvent.call($('box2'));
//-->
</script>
</body>
</html>
fangxiaoan 2006-05-01
  • 打赏
  • 举报
 回复
大哥，是这样的，还需要这样
页面上先有两个框，然后开始画线。
先点中一个框，线开始有了，然后拽到另一个框，这个线是根据鼠标变的，如果鼠标最终放到第二个框上，那这个线就算画好了，最好带箭头的。
fangxiaoan 2006-05-01
  • 打赏
  • 举报
 回复
楼上大哥，留个QQ号或者MSN什么的
ice_berg16 2006-04-30
  • 打赏
  • 举报
 回复
加事件可以这样

/* 这里写事件 */
$('line').onclick=function(){
alert('别点我!');
}
ice_berg16 2006-04-30
  • 打赏
  • 举报
 回复
<html xmlns:v="urn:schemas-microsoft-com:vml">
<style>
v\:* {
behavior: url(#default#VML);
position:absolute;
z-index:1000;
}
#box1,#box2{
border:1px solid #000;
width:40px;
height:40px;
position:absolute;
z-index:0;
}
#box1{
background:#69c;
}
#box2{
background:red;
}
body{
margin:0;
}
</style>
<body>
<v:line id="line" from="0,0" to="100,100" strokecolor="black"></v:line>
<div id="box1"></div>
<div id="box2"></div>
<script language="javascript">
<!--
var $ = document.getElementById;
window.onload=function(){
$('box1').style.left=Math.random()*800+"px";
$('box1').style.top =Math.random()*600+"px";
$('box2').style.left=Math.random()*800+"px";
$('box2').style.top =Math.random()*600+"px";
joinBox();
}
function joinBox(){
var x1 = parseInt($('box1').style.left) + ($('box1').offsetWidth/2);
var y1 = parseInt($('box1').style.top) + ($('box1').offsetHeight/2);
var x2 = parseInt($('box2').style.left) + ($('box2').offsetWidth/2);
var y2 = parseInt($('box2').style.top) + ($('box2').offsetHeight/2);
$('line').from=x1+","+y1;
$('line').to =x2+","+y2;
}

function mouseEvent(){
this.onmousedown=function(){
this.drag=true;
this.setCapture();
this.mx = event.offsetX;
this.my = event.offsetY;
}
this.onmousemove=function(){
if( this.drag )
{
this.style.left = event.clientX - this.mx;
this.style.top = event.clientY - this.my;
joinBox();
}
}
this.onmouseup =function(){
this.drag = false;
this.releaseCapture();
}
}

mouseEvent.call($('box1'));
mouseEvent.call($('box2'));
//-->
</script>
</body>
</html>

d23372 2006-04-30
  • 打赏
  • 举报
 回复
关注加接分
Eddie005 2006-04-30
  • 打赏
  • 举报
 回复
jf~
laochake 2006-04-30
  • 打赏
  • 举报
 回复
模拟表关联？
Mgccl 2006-04-30
  • 打赏
  • 举报
 回复
你的意思就是有一条线总是连着两个DIV...
这个...总是探测DIV位置...然后Javascript 画线
jobs002 2006-04-29
  • 打赏
  • 举报
 回复
关注加接分..........
mingxuan3000 2006-04-29
  • 打赏
  • 举报
 回复
方框可以拖拽

方框放到div里 拖div
钒米粒 2006-04-29
  • 打赏
  • 举报
 回复
熟悉web2.0，blog，ajax，rss，.net2005等请进入
http://blog.csdn.net/datehr/category/198305.aspx
加载更多回复（3）
我在CSDN参与的3000个帖子
2：100分急求，随机输出十个小写字母，但是，要求这十个字母不相同 3：求Sn=a+aa+aaa+…+aaa…a（n个a）之值 4：数组题 望高手帮忙！ 5：呵呵，来推荐一下我的网站，本站提供大量当今流行的免费的音乐和免费电影，...
java编写的学生信息管理系统_急求！！一个java程序编写的简单的学生信息管理系统...
setBounds(100,100,600,300); setVisible(true); } public static void main(String[] args) {new StudentManager();} class InputAct implements ActionListener{ public void actionPerformed(ActionEvent e){ ...
如何让心情保持平静？100多条禅修心法
静的层次和阶段 静首先是不要去争，没有任何争的心，没有任何杂念心。... 77、急求进步就无法全然地觉照当下；所以要不断地调整心态。曾有一个禅者说，他发觉自己“急于绵密保持正确心态”，这种心态本身...
vb/vb.net开发精粹(12)
TXT文本读入数组的问题。 EXCEL一工作表中的内容复制到另一工作表中 如何确定范围？？？...100分请大家看看这个效果是如何实现的 如何让窗体只有最小化和关闭？而且不能调整大小，没有最大化图标
版务处理记录
04/11/24 12:30 删除 musicwg 在软件工程/管理 Rational版发的“100分求Rational Rose 2003 和 PowerDesignerg下载地址，有的请帮帮忙”。删除理由：1)违反本版发贴规则。2)重复发同内容贴。04/11/24 12:30 删
JavaScript

87,992

社区成员

224,688

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章