社区
JavaScript
帖子详情
请问HTML中如何任意拖动标签?
wslfriend
2004-10-30 09:12:41
我想实现标签定位,
比如:
在页面中,有若干<a href="#">Table.FieldOne</a> <a href="#">Table.FieldTwo</a>
标签,要用鼠标拖到网页的任意位置,比如某<table>的<td>中,以实现精确定位。
不能使用<div>层,
拜托高手指点,谢谢。
...全文
316
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
随意
拖动
内容位置的两种实现方式
测试:chrome v80.0.3987.122 正常 两种方式为:拖拽普通
标签
位置或拖拽canvas
中
的文本框位置 1. 实现鼠标
拖动
标签
元素到
任意
位置 演示地址 css 代码 #range { position: relative; width: 600px; height: 400px; margin: 10px; background-color: rgb(133, 246, 250); } .icon { position: absolute; height: 100px; width: 100px; curs
[精仿]QQ2013局域网通讯(10.30更新版-带最新版界面库)
项目名称:高仿QQ2013通讯DEMO-10.30更新 版本号:10.30 最新版本 下载内容: (C#)CC2013局域网通讯源码一份, 可引用至工具箱最新版CSkin.dll-10.30版本界面库一份。 界面库更新说明: CC2013-10.30 1.由于SkinForm名字太多人使用,界面库命名正式改为CSkin.dll,官网www.cskin.net。 2.SkinTabControl
标签
中
添加菜单箭头,可点击展开菜单。 3.SkinTabControl添加
标签
关闭按钮。 4.修复部分
中
文乱码问题。 5.优化好友列表右键菜单。 6.将窗体自定义系统按钮改为集合模式,可添加无数个自定义系统按钮。自定义系统按钮事件
中
可以 e.参数 来判断。 7.增加360安全卫士-DEMO案例。 8.增加SkinAnimatorImg控件,用于支持位图动画的播放。如360的动态logo。 9.各种细节BUG优化。 CC2013-10.11 1.添加SkinTabControlEx,加入更加自定义的美化属性和动画效果。 2.添加SkinAnimator,通用动画控件。 3.添加
Html
编辑器控件 4.修复SkinButton图标和文本相对位置的BUG CC2013-9.26 1.优化好友列表CPU占用 2.好友列表加入好友登录平台属性:安卓 苹果 WEBQQ PC 3.优化标题绘制模式,新添标题绘制模式属性。 4.新添标题偏移度属性。 5.加入圆形进度条控件:ProgressIndicator。 CC2013-9.5.2 1.优化截图控件,截图工具栏加入新功能。 2.解决个人信息卡和天气窗体显示后不会消失的问题。 3.各种细节BUG优化。 CC2013-9.5.1 1.解决贴边左右隐藏的BUG。 2.解决窗体点击事件不能触发的问题。 3.优化SkinButton继承父容器背景色的代码。 4.解决SkinButton异常错误。 CC2013-9.3 1.好友列表右键菜单没反应问题。 2.新增美化控件SkinDatagridview。 3.密码软件盘回删不了文字问题。 4.双击窗体最大化,最大化后再双击恢复原大小,(win7)。 5.部分细节调优。 实现功能: 1.界面库
中
多达25个自定义换肤控件,让每个控件设设属性就能达到你想要的效果,支持图片换肤和色调绘制。 2.四边阴影,毛边效果,可以设置阴影宽度和阴影颜色,支持所有系统。 3.拥有密码键盘输入,防护更贴心。 4.8种圆角窗体模式供你选择,淋漓尽致,润滑如圆。 5.登录主界面后,有登陆提示窗,提示上次登录的城市和时间。 6.皮肤随心变:
拖动
任意
一张图片至主界面,就可以改变皮肤。 7.皮肤色调获取:改变皮肤的同时,将计算图片色调,再将其运用到窗体背景色。 8.皮肤尾部渐变:上下左右方均可实现,渐变皮肤。 9.皮肤拖拉方向:可以选择皮肤在拉伸的时候,粘着哪一边拖拉。 10.GDI+界面重绘,处理消息机制,3种移动模式和拉伸是否启用只需要设置一个属性的事就可以解决。 11.界面渐变闪现和闪退:不再像平凡的突然出现,采用API渐变机制,渐渐出现和消失,win7系统下还有动态缩小至任务的效果。 12.完美好友列表,可添加上千好友,不卡不掉线,还可以
拖动
好友到其他分组。 13.好友悬浮至头像可以查看详细资料卡。 14.窗口可调渐变后透明度:让窗体看起来更像是Vista玻璃窗体风格。 15.聊天窗口可发送图片,大文件,表情,还有震动。 16.按钮控件背景色拥有继承窗体背景主色调的功能,让整体色调保持一致。 17.更是有和如出一辙的扣扣截图。仿真度也达到100%,完美修复所有已知BUG。 18.聊天窗口,可以调字体颜色和字体样式等多项功能。 20.SkinLabel与SkinButton控件字体与窗体标题可以根据背景色暗亮度自动调节字体为黑还是白。 21.MessageBox提示框的美化,并继承调用窗口的色调与背景,MessageBox可所谓已达到帅气的不能再帅气的境界了。 22.天气皮肤自动变,所有窗体根据当地天气自动决定皮肤背景,CC最帅气功能之一。 23.个人资料卡及聊天窗体拥有动态CC秀展示。 24.主界面
拖动
换肤的同时,所关联的子窗体皮肤也会跟着变。 25.多线程大文件传输功能,支持无上限大文件传输,有进度条显示进程度。 26.界面库已封装了大图取主色调,颜色判断暗亮等多项功能。 27.如果你觉得获取天气让你的登录太慢不想要的话,注释相关调用方法即可快速登录。 界面库交流群:306485590 本人QQ:345015918 注意: Demo版不包括更新,为方便用户查看和使用属性等方法,dll只轻微加密。想反编译的就不要尝试了,里面有上百个类,改错改到你哭。 介意购买正版,永久更新配源码。 看截图或者想购买商业版的用户请访问以下地址: http://www.51aspx.com/code/TotalLikeQQ2013 特权:购买商业版的用户,有权利享有最快的更新服务,第一时间将最新版本的dll源码送到你手上。 使本项目源码或本项目生成的DLL前请仔细阅读以下协议内容,如果你同意以下协议才能使用本项目所有的功能,否则如果你违反了以下协议,有可能陷入法律纠纷和赔偿,作者保留追究法律责任的权利。 1、你可以在开发的软件产品
中
使用和修改本项目的源码和DLL,但是请保留所有相关的版权信息。 2、不能将本项目源码与作者的其他项目整合作为一个单独的软件售卖给他人使用。 3、不能传播本项目的源码和DLL,包括上传到网上、拷贝给他人等方式。 4、以上协议暂时定制,由于还不完善,作者保留以后修改协议的权利。 时间:2013-7-5 作者: 乔克斯 请保留以上版权信息,否则作者将保留追究法律责任。
在
HTML
页面上实现拖放和移动
标签
的JavaScript技巧
在本文
中
,我们将学习如何使用JavaScript实现在
HTML
页面上拖放和移动
标签
的功能。通过上述代码,我们实现了在
HTML
页面上拖放和移动
标签
的功能。当用户
拖动
标签
时,它将具有被
拖动
的外观,并且可以在放置区域上放置。元素作为
标签
的容器,并为它们添加适当的样式和事件处理程序。首先,让我们创建一个基本的
HTML
结构,其
中
包含一些可
拖动
和可放置的
标签
。事件的监听器,以便在
拖动
开始和结束时执行相应的操作。在上面的代码
中
,我们创建了三个可
拖动
的
标签
(// 在放置区域上
拖动
时触发的事件处理程序。属性,以使其可
拖动
。
html
图片随意
拖动
怎么实现,
HTML
实现随意
拖动
内容位置
HTML
实现随意
拖动
内容位置2020-09-01 07:19:43两种方式为:拖拽普通
标签
位置或拖拽canvas
中
的文本框位置1. 实现鼠标
拖动
标签
元素到
任意
位置css 代码#range{position:relative;width:600px;height:400px;margin:10px;background-color:rgb(133,246,250);}.icon{...
HTML
5 Drag拖拽文字,生成
标签
最近公司的项目想做一个拖拽生成
标签
的应用效果,在网上找了很多例子,都不能完成这个效果,自己就摸索了一下,再结合了大佬们的例子,做了一个简单的小demo;具体的效果如下:
HTML
和CSS就比较简单了,具体的样式大家可以自己进行编写~
HTML
:<!DOCTYPE
html
> <
html
lang="en"> <head> <meta charset="...
JavaScript
87,955
社区成员
224,621
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章