原生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 相关文章推荐
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
Javascript中replace()小结
Sep 30 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 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
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php MySQL与分页效率
2008/06/04 PHP
Yii全局函数用法示例
2017/01/22 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
解决Mac下使用python的坑
2019/08/13 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
python怎么自定义捕获错误
2020/06/29 Python
降低python版本的操作方法
2020/09/11 Python
高中生第一学年自我鉴定2015
2014/09/28 职场文书
大学生读书笔记大全
2015/07/01 职场文书
团组织关系介绍信
2019/06/24 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书