在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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 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方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
python处理csv中的空值方法
2018/06/22 Python
Python 使用多属性来进行排序
2019/09/01 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
python实现udp聊天窗口
2020/03/31 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
品质主管的岗位职责
2013/12/04 职场文书
老师自我鉴定范文
2013/12/25 职场文书
讲解员培训方案
2014/05/04 职场文书
学习经验演讲稿
2014/05/10 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫
vue 自定义组件添加原生事件
2022/04/21 Vue.js
Python日志模块logging用法
2022/06/05 Python