在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 相关文章推荐
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
基于jQuery的message插件实现右下角弹出消息框
Jan 11 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 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格式化时间戳
2016/12/17 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
js实现简单的倒计时
2021/01/28 Javascript
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
浅谈python中get pass用法
2019/03/19 Python
利用Python检测URL状态
2019/07/31 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
中间件分为哪几类
2012/03/14 面试题
nginx简单配置多个server的方法
2021/03/31 Servers