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 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
原生javascript实现分页效果
Apr 21 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
Vue Element校验validate的实例
Sep 21 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
PHP4.04简明安装
2006/10/09 PHP
Dedecms常用函数解析
2008/02/01 PHP
php实现jQuery扩展函数
2009/10/30 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
php微信支付接口开发程序
2016/08/02 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
JS实现多功能计算器
2020/10/28 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
Python读大数据txt
2016/03/28 Python
python+django加载静态网页模板解析
2017/12/12 Python
python基于http下载视频或音频
2018/06/20 Python
Python实现图片拼接的代码
2018/07/02 Python
django2.0扩展用户字段示例
2019/02/13 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
车工岗位职责
2013/11/26 职场文书
洗煤厂厂长岗位职责
2014/01/03 职场文书
烹调加工管理制度
2014/02/04 职场文书
中学教师教育感言
2014/02/21 职场文书
招股说明书范本
2014/05/06 职场文书
德育标兵事迹材料
2014/08/24 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
搭讪开场白台词大全
2015/05/28 职场文书