社区
CSS
帖子详情
层 顶者有分O.o
hejunbin
2007-01-21 05:29:18
层拖动,如何可以得到现在拖动层是否在某个层的上方。
嗯,层随鼠标拖动,现在想要知道,鼠标的当前位置下的网页元素。
但是,现在这个层是随鼠标动的,就是说用event.srcElement得到是正在拖动的层,而不知道其是否在哪个网页元素上面。
偶,想要实现百度,QQ,MSN空间那样可以用拖动模块实现网页布局的效果,谢谢各位大哥的一O.o
...全文
337
14
打赏
收藏
层 顶者有分O.o
层拖动,如何可以得到现在拖动层是否在某个层的上方。 嗯,层随鼠标拖动,现在想要知道,鼠标的当前位置下的网页元素。 但是,现在这个层是随鼠标动的,就是说用event.srcElement得到是正在拖动的层,而不知道其是否在哪个网页元素上面。 偶,想要实现百度,QQ,MSN空间那样可以用拖动模块实现网页布局的效果,谢谢各位大哥的一O.o
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
14 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
hejunbin
2007-01-26
打赏
举报
回复
现在知道了,只要隐藏就可以了。
hejunbin
2007-01-24
打赏
举报
回复
现在知道怎么记录布局了的说,
只是把孩子节点记录就可以了,
但是怎么解决一行三列,一行两列之间的转换呢?!
O.o
hejunbin
2007-01-23
打赏
举报
回复
O.o
恩,要得其实就是这个效果。可是,要得是层拖动,与表格会是有一定的差距。
刚才自己搞定了一下,但是效果没有楼上的楼上的那位大哥的好。
主要方法是判断成在body的绝对位置,如果鼠标的坐标在这个层上,就拖动成功。
不过现在又遇到一个新的问题,要怎么样才可以记录拖动以后的布局呢?
万分感谢O.o
briangzhu
2007-01-22
打赏
举报
回复
假设 拖动的Div为A,待判定的Div为B。
为B添加 onmouseover 事件,A保存在一个全局变量中不就实现了?
colin310
2007-01-22
打赏
举报
回复
呵呵!不过只在IE下正常
zhangjincheng88
2007-01-22
打赏
举报
回复
顶一下.
飘零雾雨
2007-01-22
打赏
举报
回复
mark!
hejunbin
2007-01-22
打赏
举报
回复
当拖动的时候mouse 总是在div A上面的,所以div B的onmouseover 事件是不会触发的说O.o
不知道楼上的是否有别的解决方法呢?
zhangchaokun
2007-01-22
打赏
举报
回复
楼上的代码不错,学习一下!
wuxinlangman
2007-01-22
打赏
举报
回复
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style>
.removableObj
{
height:25;
position:relative;
left: 1px;
}
</style>
<script language="javascript">
var beginMoving=false;
var sourceObj=null;
var objectObj=null;
var objectObj2=null;
function MouseDownToMove(obj){
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
sourceObj=obj;
objectObj=null;
}
function MouseMoveToMove(obj){
if(!beginMoving) return false;
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
function MouseUpToMove(obj){
if(!beginMoving) return false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
window.setTimeout("swapFun()",20);
}
function MouseOverFun(obj){
if(obj==sourceObj) return false;
objectObj=obj;
}
function MouseOverFun2(obj)
{
objectObj2=obj;
}
function swapFun()
{
if(sourceObj!=null && objectObj!=null)
objectObj.insertAdjacentElement("beforeBegin",sourceObj);
else if(sourceObj!=null && objectObj2!=null)
objectObj2.insertAdjacentElement("beforeEnd",sourceObj);
sourceObj=null;
objectObj=null;
objectObj2=null;
}
</script>
</head>
<body>
<table border="1" width="100%" height="58">
<tr>
<td width="34%" valign="top" height="46" onmouseover="MouseOverFun2(this);" >
<input name="tableName" title="实用时把它隐藏就是" value="空间-------1">
<table border="1" width="100%" bgcolor="#99CCFF" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" id="1">
<tr>
<td width="25%"><input name="tableName" title="实用时把它隐藏就是" value="表格1">表格1</td>
<td >其它内容</td>
</tr>
</table><table border="1" width="100%" bgcolor="#FFCCFF" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" id="2">
<tr>
<td width="25%"><input name="tableName" title="实用时把它隐藏就是" value="表格2">表格2</td>
<td >其它内容</td>
</tr>
</table>
<table border="1" width="100%" bgcolor="#00CC99" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" id="3">
<tr>
<td width="25%"><input name="tableName" title="实用时把它隐藏就是" value="表格3">表格3</td>
<td >其它内容</td>
</tr>
</table>
</td>
<td width="32%" valign="top" height="52" onmouseover="MouseOverFun2(this);" >
<input name="tableName" title="实用时把它隐藏就是" value="空间-------2">
<table border="1" width="100%" bgcolor="#FF0000" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" id="4">
<tr>
<td width="25%"><input name="tableName" title="实用时把它隐藏就是" value="表格4">表格4</td>
<td >其它内容</td>
</tr>
</table>
<table border="1" width="100%" bgcolor="#00FFFF" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" id="5">
<tr>
<td width="25%"><input name="tableName" title="实用时把它隐藏就是" value="表格5">表格5</td>
<td >其它内容</td>
</tr>
</table>
</td>
<td width="34%" valign="top" height="52" onmouseover="MouseOverFun2(this);" >
<input name="tableName" title="实用时把它隐藏就是" value="空间-------3">
<table border="1" width="100%" bgcolor="#FF9966" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" id="6">
<tr>
<td width="25%"><input name="tableName" title="实用时把它隐藏就是" value="表格6">表格6</td>
<td >其它内容</td>
</tr>
</table>
<table width="100%" border="1" bgcolor="#FFFFCC" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" id="7">
<tr>
<td width="25%"><input name="tableName" title="实用时把它隐藏就是" value="表格7">表格7</td>
<td >其它内容</td>
</tr>
</table></td>
</tr>
</table>
<input type=button value="保存示例" onclick="saveFun()">
</body>
</html>
<script>
function saveFun()
{
var tableNameObjs=document.getElementsByName("tableName");
var tempStr="";
for(var i=0;i<tableNameObjs.length;i++)
{
tempStr += "\n"+tableNameObjs[i].value;
}
alert(tempStr);
}
</script>
hejunbin
2007-01-21
打赏
举报
回复
一O.o(还是我自己慢慢解决三)
hejunbin
2007-01-21
打赏
举报
回复
爱。。。
hejunbin
2007-01-21
打赏
举报
回复
?!O.0
bbssaa
2007-01-21
打赏
举报
回复
用dojo dnd吧..
JAVA_API1.6文档(中文)
javax.rmi.ssl 通过安全套接字
层
(SSL) 或传输
层
安全 (TLS) 协议提供 RMIClientSocketFactory 和 RMIServerSocketFactory 的实现。 javax.security.auth 此包提供用于进行验证和授权的框架。 javax.security.auth....
springboot三
层
架构解决报错信息:o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet
报错信息: 2023-07-23 21:20:50.175 ERROR 4380 --- [nio-8080-exec-1] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception ...
跟汤老师学Java(第15季):I/O输入输出流
真正做到零基础入门学习,适合初学者的教程! 课程内容包括: 1.File类 2.IO流简介 3.流的分类 输入流、输出流 字节流、字符流 节点流、...
[nio-8080-exec-2] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatch
2019-12-06 11:12:15.583 ERROR 10512 --- [nio-8080-exec-2] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [R...
springboot项目用浏览器访问时报错 [p-nio-80-exec-2] o.a.c.c.C.[.[.[/]
2022-03-25 18:56:40.544 ERROR 11008 --- [p-nio-80-exec-2] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Circular ...
CSS
61,111
社区成员
60,733
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章