社区
JavaScript
帖子详情
请问HTML中如何任意拖动标签?
wslfriend
2004-10-30 09:12:41
我想实现标签定位,
比如:
在页面中,有若干<a href="#">Table.FieldOne</a> <a href="#">Table.FieldTwo</a>
标签,要用鼠标拖到网页的任意位置,比如某<table>的<td>中,以实现精确定位。
不能使用<div>层,
拜托高手指点,谢谢。
...全文
313
6
打赏
收藏
请问HTML中如何任意拖动标签?
我想实现标签定位, 比如: 在页面中,有若干Table.FieldOne Table.FieldTwo 标签,要用鼠标拖到网页的任意位置,比如某的中,以实现精确定位。 不能使用层, 拜托高手指点,谢谢。
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
6 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
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代码,被系统整合得非常凌乱,终究是个遗憾。
还有,拖动时要用鼠标选蓝一行字,才可以拖,眼下还没好的思路解决。
wslfriend
2004-10-30
打赏
举报
回复
楼上的朋友,谢谢你,不过似乎没能作到这个效果。
我最终目的是生成的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>
wslfriend
2004-10-30
打赏
举报
回复
我的目的很简单,
<table >
<tr>
<td><a href='#'>[字段名]</a></td>
</tr>
</table>
<td></td>的内容,是由鼠标从其他地方拖进来的。
必须要实现精确定位,否则我无法把数据库中相应数据放到指定位置。
micher_yan
2004-10-30
打赏
举报
回复
要想实现在浏览器中精确定位?不用层用什么?就算你不用div也的用Layer标签,用脚本判断鼠标拖动过程中的偏移量,然后设置层中数据的定位坐标,搞定。
html
随意
拖动
内容位置的两种实现方式
两种方式为:拖拽普通
标签
位置或拖拽canvas
中
的文本框位置 1. 实现鼠标
拖动
标签
元素到
任意
位置 演示地址 css 代码 #range { position: relative; width: 600px; height: 400px; margin: 10px; background-...
[精仿]QQ2013局域网通讯(10.30更新版-带最新版界面库)
6.皮肤随心变:
拖动
任意
一张图片至主界面,就可以改变皮肤。 7.皮肤色调获取:改变皮肤的同时,将计算图片色调,再将其运用到窗体背景色。 8.皮肤尾部渐变:上下左右方均可实现,渐变皮肤。 9.皮肤拖拉方向:可以...
在
HTML
页面上实现拖放和移动
标签
的JavaScript技巧
在本文
中
,我们将学习如何使用JavaScript实现在
HTML
页面上拖放和移动
标签
的功能。...在上面的代码
中
,我们创建了三个可
拖动
的
标签
(// 在放置区域上
拖动
时触发的事件处理程序。属性,以使其可
拖动
。
html
图片随意
拖动
怎么实现,
HTML
实现随意
拖动
内容位置
HTML
实现随意
拖动
内容位置2020-09-01 07:19:43两种方式为:拖拽普通
标签
位置或拖拽canvas
中
的文本框位置1. 实现鼠标
拖动
标签
元素到
任意
位置css 代码#range{position:relative;width:600px;height:400px;margin:10px...
HTML
5 Drag拖拽文字,生成
标签
最近公司的项目想做一个拖拽生成
标签
的应用效果,在网上找了很多例子,都不能完成这个效果,自己就摸索了一下,再结合了大佬们的例子,做了一个简单的小demo;具体的效果如下:
HTML
和CSS就比较简单了,具体的样式...
JavaScript
87,917
社区成员
224,617
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章