在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 相关文章推荐
jquery自定义属性(类型/属性值)
May 21 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
js实现简单放大镜效果
Mar 07 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 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的ASP防火墙
2006/10/09 PHP
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
PHP类的反射用法实例
2014/11/03 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
php远程下载类分享
2016/04/13 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
Python中的并发编程实例
2014/07/07 Python
Python实现二叉搜索树
2016/02/03 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
农业资源与环境专业自荐信范文
2013/12/30 职场文书
社区七一党员活动方案
2014/01/25 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
运动会通讯稿600字
2015/07/20 职场文书
nginx静态资源的服务器配置方法
2022/07/07 Servers