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循环滚动图片代码
Dec 08 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 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
Search Engine Friendly的URL设计
2006/10/09 PHP
php 图片上传类代码
2009/07/17 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
php实现的验证码文件类实例
2015/06/18 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
linux 下实现python多版本安装实践
2014/11/18 Python
Python数据结构之单链表详解
2017/09/12 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
Python for循环及基础用法详解
2019/11/08 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
清洁工表扬信
2014/01/08 职场文书
给女儿的表扬信
2014/01/18 职场文书
《乌塔》教学反思
2014/02/17 职场文书
探亲假请假条
2014/04/11 职场文书
学雷锋标语
2014/06/25 职场文书
大专学生求职信
2014/07/04 职场文书
小学班主任事迹材料
2014/12/17 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python