在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 form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
javascript常见操作汇总
Sep 03 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
JavaScript将数组转换为链表的方法
Feb 16 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
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
基于jquery实现图片放大功能
2016/05/07 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
python删除列表中重复记录的方法
2015/04/28 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
Python目录和文件处理总结详解
2019/09/02 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
python集合的新增元素方法整理
2020/12/07 Python
python空元组在all中返回结果详解
2020/12/15 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
《草原》教学反思
2014/02/15 职场文书
经济管理自荐书
2014/06/09 职场文书
道路施工安全责任书
2014/07/24 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
公证书格式
2015/01/23 职场文书
焦点访谈观后感
2015/06/11 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
Nginx内网单机反向代理的实现
2021/11/07 Servers