在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 日期转换成中文格式的函数
Jul 07 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
利用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
福利彩票幸运号码自动生成器
2006/10/09 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
微信支付扫码支付php版
2016/07/22 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
python学习入门细节知识点
2018/03/29 Python
实例讲解python中的协程
2018/10/08 Python
python字典排序的方法
2019/10/12 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
Python实现AI换脸功能
2020/04/10 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
python 爬虫请求模块requests详解
2020/12/04 Python
Whistles官网:英国女装品牌
2020/08/14 全球购物
行政部总经理岗位职责
2014/01/04 职场文书
工作推荐信范文
2014/05/10 职场文书
拉歌口号大全
2014/06/13 职场文书
文秘应届生求职信
2014/07/05 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python