原生js拖拽(第一课 未兼容)拖拽思路


Posted in Javascript onMarch 29, 2013
/* 
拖拽流程: 
1、第一步点击需要拖动的元素 
2、在点击下的元素被选中,进行move移动 
3、当鼠标弹起的时候,停止动作 
4、点击元素oDIV的时候,可用的是oDIV区域,而move和up则是全局区域,也就是整个文档通用,即应该用document 
*/ 
oDIV = document.getElementById("gaga"); 
oDIV.onmousedown = function( e ){ // 当鼠标点击下去的时候 
var diffX = e.clientX - oDIV.offsetLeft; // 点击的位置距离浏览器最左边的位置(clientX) 再减去被点击元素距离最左边的位置(oDIV.offetLeft) 在引动的所点击的元素距离最左边的位置是不确定的 所以需要这个结果 
var diffY = e.clientY - oDIV.offsetTop; // 点击的位置距离浏览器顶部的位置(clientY) 再减去被点击元素距离顶部的位置(oDIV.offsetTop) 在引动的所点击的元素距离顶部的位置是不确定的 所以需要这个结果 
document.onmousemove = function( e ){ // 当按下鼠标不放的时候 
var e = e || window.event; 
oDIV.style.top = e.clientY - diffY + "px"; 
oDIV.style.left = e.clientX - diffX + "px"; 
}; 
document.onmouseup = function(){ // 当鼠标弹起的时候 
document.onmousemove = null; // 清空鼠标按下鼠标不放的事件 
document.onmouseup = null; // 清空鼠标弹起事件 
} 
};
Javascript 相关文章推荐
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 #Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 #Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 #Javascript
JS 跳转页面延迟2种方法
Mar 29 #Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 #Javascript
javascript重写alert方法的实例代码
Mar 29 #Javascript
javascript时间函数基础介绍
Mar 28 #Javascript
You might like
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
js变换显示图片的实例
2013/04/16 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
python3序列化与反序列化用法实例
2015/05/26 Python
python调用fortran模块
2016/04/08 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
关于python写入文件自动换行的问题
2018/06/23 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
详解Python 函数参数的拆解
2020/09/02 Python
Python如何实现机器人聊天
2020/09/10 Python
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
资助贫困学生倡议书
2014/05/16 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
Linux中如何安装并部署Redis
2022/04/18 Servers