在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中的this绑定介绍
Sep 22 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
Vuex的API文档说明详解
Feb 05 Javascript
解决Nuxt使用axios跨域问题
Jul 06 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生成静态html文件的三种方法
2013/06/18 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
JS验证不重复验证码
2017/02/10 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
python实现简单温度转换的方法
2015/03/13 Python
进一步理解Python中的函数编程
2015/04/13 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
python tkinter窗口最大化的实现
2019/07/15 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
人力资源主管职责范本
2014/03/05 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
部队2014年终工作总结
2014/11/27 职场文书
硕士学位申请报告
2015/05/15 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android