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的多标签实现代码
Sep 19 Javascript
jQuery的ready方法详解
Nov 27 Javascript
Js实现自定义右键行为
Mar 26 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
javascript实现二叉树遍历的代码
Jun 08 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 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
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
python批量提交沙箱问题实例
2014/10/08 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
Python ATM功能实现代码实例
2020/03/19 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
python程序需要编译吗
2020/06/19 Python
python interpolate插值实例
2020/07/06 Python
python实现人工蜂群算法
2020/09/18 Python
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
老教师工作总结的自我评价
2013/09/27 职场文书
运动会广播稿500字
2014/01/28 职场文书
环保建议书作文300字
2015/09/14 职场文书
小学数学国培研修日志
2015/11/13 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
mysql优化
2021/04/06 MySQL
Vue.Draggable实现交换位置
2022/04/07 Vue.js