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 相关文章推荐
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
vscode自定义vue模板的实现
Jan 27 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
PHP安全配置
2006/10/09 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
php读取mysql的简单实例
2014/01/15 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
详解python的webrtc库实现语音端点检测
2017/05/31 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
实例讲解Python爬取网页数据
2018/07/08 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
python关于倒排列的知识点总结
2020/10/13 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
国际商务专业学生个人的自我评价
2013/09/28 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
超市员工管理制度
2015/08/06 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
Linux中如何安装并部署Redis
2022/04/18 Servers