87,997
社区成员
发帖
与我相关
我的任务
分享请问HTML中如何任意拖动标签？
我想实现标签定位，
比如：
在页面中，有若干<a href="#">Table.FieldOne</a> <a href="#">Table.FieldTwo</a>
标签，要用鼠标拖到网页的任意位置，比如某<table>的<td>中，以实现精确定位。
不能使用<div>层，
拜托高手指点，谢谢。
比如：
在页面中，有若干<a href="#">Table.FieldOne</a> <a href="#">Table.FieldTwo</a>
标签，要用鼠标拖到网页的任意位置，比如某<table>的<td>中，以实现精确定位。
不能使用<div>层，
拜托高手指点，谢谢。
...全文
请发表友善的回复…
发表回复
wslfriend 2004-11-13
- 打赏
- 举报
分数实在太少，又不擅长赚分，就不给咯。
无意中看了梅花的一个例子，解决了这个问题。
无意中看了梅花的一个例子，解决了这个问题。
wslfriend 2004-10-30
- 打赏
- 举报
功能勉强实现，我是用嵌套Iframe作的。
例子如下
bbb.htm
<html>
<script language="javascript">
function fn_LoadCode()
{
window.alert(Editor.document.body.innerHTML);
}
</script>
<body >
<iframe id="Editor" src="aaa.htm"></iframe>
<input type ="button" onclick="javascript:fn_LoadCode()" value ="OK">
</body>
</html>
<script language="javascript">
function document.onreadystatechange() //该事件似乎在刚开始时执行，以后不执行
{
Editor.document.designMode="On"
setTimeout("Editor.focus();",0);
}
</script>
aaa.htm
<html>
<body >
<a href="javascript:window.alert('ok')">adgasdgasd</a>
<table border="1">
<tr>
<td>aa</td>
<td>bb</td>
</tr>
</table>
</body>
</html>
这样可以实现我需要的效果，但outerHTML代码，被系统整合得非常凌乱，终究是个遗憾。
还有，拖动时要用鼠标选蓝一行字，才可以拖，眼下还没好的思路解决。
例子如下
bbb.htm
<html>
<script language="javascript">
function fn_LoadCode()
{
window.alert(Editor.document.body.innerHTML);
}
</script>
<body >
<iframe id="Editor" src="aaa.htm"></iframe>
<input type ="button" onclick="javascript:fn_LoadCode()" value ="OK">
</body>
</html>
<script language="javascript">
function document.onreadystatechange() //该事件似乎在刚开始时执行，以后不执行
{
Editor.document.designMode="On"
setTimeout("Editor.focus();",0);
}
</script>
aaa.htm
<html>
<body >
<a href="javascript:window.alert('ok')">adgasdgasd</a>
<table border="1">
<tr>
<td>aa</td>
<td>bb</td>
</tr>
</table>
</body>
</html>
这样可以实现我需要的效果，但outerHTML代码，被系统整合得非常凌乱，终究是个遗憾。
还有，拖动时要用鼠标选蓝一行字，才可以拖，眼下还没好的思路解决。
wslfriend 2004-10-30
- 打赏
- 举报
楼上的朋友，谢谢你，不过似乎没能作到这个效果。
我最终目的是生成的HTML为
<table>
<tr>
<td><a >dragme</a> </td>
</tr>
</table>
您的代码实现的是平滑拖动。
其实，效果就象在 Dreamweaver中往<table>内增加<input>一样。
我最终目的是生成的HTML为
<table>
<tr>
<td><a >dragme</a> </td>
</tr>
</table>
您的代码实现的是平滑拖动。
其实，效果就象在 Dreamweaver中往<table>内增加<input>一样。
ttyp 2004-10-30
- 打赏
- 举报
<a href="#" style='position:absolute;background:red' onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp()>dragme</a>
<script language=javascript>
var Obj;
function MouseDown(obj)
{
Obj=obj;
Obj.setCapture();
Obj.l=event.x-Obj.style.pixelLeft;
Obj.t=event.y-Obj.style.pixelTop;
}
function MouseMove()
{
if(Obj!=null)
{
Obj.style.left = event.x-Obj.l;
Obj.style.top = event.y-Obj.t;
}
}
function MouseUp()
{
if(Obj!=null)
{
Obj.releaseCapture();
Obj=null;
}
}
</script>
<script language=javascript>
var Obj;
function MouseDown(obj)
{
Obj=obj;
Obj.setCapture();
Obj.l=event.x-Obj.style.pixelLeft;
Obj.t=event.y-Obj.style.pixelTop;
}
function MouseMove()
{
if(Obj!=null)
{
Obj.style.left = event.x-Obj.l;
Obj.style.top = event.y-Obj.t;
}
}
function MouseUp()
{
if(Obj!=null)
{
Obj.releaseCapture();
Obj=null;
}
}
</script>
wslfriend 2004-10-30
- 打赏
- 举报
我的目的很简单，
<table >
<tr>
<td><a href='#'>[字段名]</a></td>
</tr>
</table>
<td></td>的内容，是由鼠标从其他地方拖进来的。
必须要实现精确定位，否则我无法把数据库中相应数据放到指定位置。
<table >
<tr>
<td><a href='#'>[字段名]</a></td>
</tr>
</table>
<td></td>的内容，是由鼠标从其他地方拖进来的。
必须要实现精确定位，否则我无法把数据库中相应数据放到指定位置。
micher_yan 2004-10-30
- 打赏
- 举报
要想实现在浏览器中精确定位？不用层用什么？就算你不用div也的用Layer标签，用脚本判断鼠标拖动过程中的偏移量，然后设置层中数据的定位坐标，搞定。
