在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 相关文章推荐
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
利用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
Laravel 5框架学习之表单
2015/04/08 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
一段批量给页面上的控件赋值js
2010/06/19 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
学习Node.js模块机制
2016/10/17 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
python实现批量改文件名称的方法
2015/05/25 Python
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
英国假发网站:Hothair
2018/02/23 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
Linux常见面试题
2016/10/04 面试题
迷你西餐厅创业计划书范文
2013/12/31 职场文书
料理师求职信
2014/01/30 职场文书
服务员岗位责任制
2014/02/11 职场文书
2014年终工作总结范本
2014/12/15 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
再谈python_tkinter弹出对话框创建
2022/03/20 Python