在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中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
简单的js表单验证函数
Oct 28 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
angularJS中router的使用指南
Feb 09 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 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
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
php简单的上传类分享
2016/05/15 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
Python实现对字符串的加密解密方法示例
2017/04/29 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
python 自动重连wifi windows的方法
2018/12/18 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
Python如何急速下载第三方库详解
2020/11/02 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
服务承诺口号
2014/05/22 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
PHP RabbitMQ消息列队
2022/05/11 PHP