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 标题的自动翻转实现代码
Oct 14 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
vuex的简单使用教程
Feb 02 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 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
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
PHP实现用户认证及管理完全源码
2007/03/11 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
理解Javascript_10_对象模型
2010/10/16 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
pycharm远程调试openstack代码
2017/11/21 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
python实现雨滴下落到地面效果
2018/06/21 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
python dumps和loads区别详解
2020/02/04 Python
Python列表解析操作实例总结
2020/02/26 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
python连接mysql有哪些方法
2020/06/24 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
给男朋友的道歉信
2014/01/12 职场文书
打造完美自荐信
2014/01/24 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
单位消防安全责任书
2014/07/23 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
给学校的建议书400字
2015/09/14 职场文书
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript