原生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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
JQuery 写的个性导航菜单
Dec 24 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
自己封装的javascript事件队列函数版
Jun 12 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
详解JavaScript对象类型
Jun 16 Javascript
原生js轮播特效
May 18 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 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 session有效期问题
2009/04/26 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
PHP经典面试题集锦
2015/03/19 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
express框架下使用session的方法
2019/07/31 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
理解Python中的With语句
2015/02/02 Python
带你了解python装饰器
2017/06/15 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
OpenCV 模板匹配
2019/07/10 Python
python pandas 时间日期的处理实现
2019/07/30 Python
关于Keras Dense层整理
2020/05/21 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
文言文形式的学生求职信
2013/12/03 职场文书
家长对老师的感言
2014/03/11 职场文书
项目合作协议书范本
2014/04/16 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
体检通知范文
2015/04/21 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
八年级作文之感恩
2019/11/22 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript