在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脚本实现Web页面信息交互
Oct 11 Javascript
用javascript实现在小方框中浏览大图的代码
Aug 14 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
Javascript组合继承方法代码实例解析
Apr 02 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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读取超大文件的实例代码
2012/04/01 PHP
浅谈php扩展imagick
2014/06/02 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
node后端服务保活的实现
2019/11/10 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
Java面试笔试题大全
2016/11/23 面试题
作弊检讨书1000字
2014/02/01 职场文书
初中生操行评语大全
2014/04/24 职场文书
军训口号
2014/06/13 职场文书
大专毕业生求职信
2014/07/05 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript