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性能最佳实践的讨论,与求教
Mar 30 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
element-ui 本地化使用教程详解
Oct 28 Javascript
js实现移动端轮播图滑动切换
Dec 21 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
将两个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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
javascript 回调函数详解
2014/11/11 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
python使用PyQt5的简单方法
2019/02/27 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
幼教简历自我评价
2014/01/28 职场文书
上课打牌的检讨书
2014/02/15 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
职工小家建设活动方案
2014/08/25 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书