Javascript简单实现可拖动的div


Posted in Javascript onOctober 22, 2013
<html> 
<head> 
<script type="text/javascript"> 
var x; 
var y; 
function $(id) 
{ 
return document.getElementById(id) 
} 
function mousedown() 
{ 
x=event.clientX-$("px").style.pixelLeft; 
y=event.clientY-$("px").style.pixelTop; 
$("px").style.border="2px solid red"; 
$("px").onmousemove = mousemove; 
} 
function mouseup() 
{ 
$("px").onmousemove = ""; 
$("px").style.border=""; 
} 
function mousemove() 
{ 
$("px").style.pixelLeft=event.clientX-x; 
$("px").style.pixelTop=event.clientY-y; 
} 
</script> 
</head> 
<body> 
<div id="px" style="position:absolute; left:100px; height:100px; width:100px; background-color:#FF0;" 
onmousedown="mousedown()" onmouseup="mouseup()" > 
</div> 
</body> 
</html>
Javascript 相关文章推荐
jQuery 性能优化手册 推荐
Feb 23 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
轮播图组件js代码
Aug 08 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 #Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 #Javascript
js单例模式的两种方案
Oct 22 #Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 #Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 #Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 #Javascript
用js的for循环获取radio选中的值
Oct 21 #Javascript
You might like
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Python多线程编程(五):死锁的形成
2015/04/05 Python
一份python入门应该看的学习资料
2018/04/11 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
历史学专业推荐信
2013/11/06 职场文书
税务专业毕业生自荐信
2013/11/10 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
外联部演讲稿
2014/05/24 职场文书
抵押贷款承诺书
2014/05/30 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技