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 相关文章推荐
WordPress JQuery处理沙发头像
Jun 22 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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读取文件内容后清空文件示例代码
2014/03/18 PHP
php表单处理操作
2017/11/16 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
python实现黑客字幕雨效果
2018/06/21 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
Python如何实现FTP功能
2020/05/28 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
索尼巴西商店:Sony巴西
2019/06/21 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
几道Web/Ajax的面试题
2016/11/05 面试题
化妆师职业生涯规划书
2014/02/16 职场文书
安全演讲稿开场白
2014/08/25 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
2014年学生工作总结
2014/11/20 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers