在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 Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
编辑浪子版表单验证类
May 12 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
vue购物车插件编写代码
Nov 27 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
validform表单验证的实现方法
Mar 08 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 array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
js树形控件脚本代码
2008/07/24 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
西雅图的买手店:Totokaelo
2019/10/19 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
银行自荐信范文
2013/10/07 职场文书
国际贸易个人求职信范文
2014/01/04 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
大学生社会实践方案
2014/05/11 职场文书
员工自我评价范文
2015/03/11 职场文书
初中体育教学随笔
2015/08/15 职场文书
DQL数据查询语句使用示例
2022/12/24 MySQL