在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汉字转拼音实现代码
Feb 06 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
Vue使用轮询定时发送请求代码
Aug 10 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
一些星际专用术语解释
2020/03/04 星际争霸
论坛头像随机变换代码
2006/10/09 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
php微信开发之百度天气预报
2016/11/18 PHP
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
python操作MySQL数据库的方法分享
2012/05/29 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
工业学校毕业生自荐信范文
2014/01/03 职场文书
出国考察邀请函
2014/01/21 职场文书
幼儿园国庆节活动方案
2014/02/01 职场文书
境外导游求职信
2014/02/27 职场文书
产假请假条
2014/04/10 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
python实现简易名片管理系统
2021/04/11 Python
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
Golang实现可重入锁的示例代码
2022/05/25 Golang