在html页面上拖放移动标签


Posted in Javascript onJanuary 08, 2010

1、设置标签(如img, div等等)的样式:将position设置为absolute,例如:
<div style="position:absolute" id="move_id" onmousedown="mousedown()" onmouseup="mouseup()">
2、用一个临时元素来记录标签的状态 。将临时元素的display设置为none ,隐藏这个临时元素,这里使用了input 扮演临时元素。值为0表示这个标签没有被移动过。当你的鼠标在这个标签上按下的时候,它的值被设置为1,表示准备拖放和移动。
<input type="text" style="display:none" id="temp_id" value="0">
3、象下面一样设置 <body> :
<body onmousemove="mousemove();">
4、最后看下JavaScript函数了:
代码

<script language="javascript" type="text/javascript"> 
function mousedown() 
{ 
document.getElementById("temp_id").value = "1"; } 
function mouseup() 
{ 
document.getElementById("temp_id").value = "0"; 
document.getElementById("move_id").style.cursor = "default"; 
} 
function mousemove() 
{ 
if (document.getElementById("temp_id").value == "1") 
{ 
document.getElementById("move_id").style.top = event.clientY - 10; 
document.getElementById("move_id").style.left = event.clientX - 50; 
document.getElementById("move_id").style.cursor = "move"; 
} 
} 
</script>
Javascript 相关文章推荐
经验几则 推荐
Sep 05 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
利用js获取服务器时间的两个简单方法
Jan 08 #Javascript
JavaScript中的集合及效率
Jan 08 #Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 #Javascript
Extjs学习笔记之八 继承和事件基础
Jan 08 #Javascript
Extjs学习笔记之七 布局
Jan 08 #Javascript
IE6下JS动态设置图片src地址问题
Jan 08 #Javascript
Javascript 中的类和闭包
Jan 08 #Javascript
You might like
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python列表list数组array用法实例解析
2014/10/28 Python
python简单判断序列是否为空的方法
2015/06/30 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
Python中格式化format()方法详解
2017/04/01 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
Python列表list排列组合操作示例
2018/12/18 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
python实现邮件自动发送
2019/08/10 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
python 实现图片裁剪小工具
2021/02/02 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫
Java 多线程协作作业之信号同步
2022/05/11 Java/Android