在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 相关文章推荐
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
php设置编码格式的方法
2013/03/05 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
vue实现引入本地json的方法分析
2018/07/12 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
Django实现快速分页的方法实例
2017/10/22 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
基于python3实现倒叙字符串
2020/02/18 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书