在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 相关文章推荐
javaScript 数值型和字符串型之间的转换
Jul 25 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 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 dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
php身份证号码检查类实例
2015/06/18 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
从vue源码看props的用法
2019/01/09 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
Python中input和raw_input的一点区别
2014/10/21 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
用Python实现数据的透视表的方法
2018/11/16 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
医学院四年学习生活的自我评价
2013/11/06 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
2015年工会工作总结
2015/03/30 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
数学复习课教学反思
2016/02/18 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
使用 Apache 反向代理的设置技巧
2022/01/18 Servers