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实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 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 中的输出缓冲
2006/12/21 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
学习ExtJS Column布局
2009/10/08 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
应征英语教师求职信
2013/11/27 职场文书
办公室主任先进事迹
2014/01/18 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
工程建设实施方案
2014/03/14 职场文书
期末学生评语大全
2014/04/24 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
家长学校工作方案
2014/05/07 职场文书
惊天动地观后感
2015/06/10 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js