原生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 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
JS 字符串连接[性能比较]
May 10 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
Javascript面向对象编程
Mar 18 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
Node.js模块加载详解
Aug 16 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
vue多次循环操作示例
Feb 08 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 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数据库的查询统计速度 select 索引应用
2007/04/11 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
js常用代码段整理
2011/11/30 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
js实现拖拽效果
2015/02/12 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
微信分享调用jssdk实例
2017/06/08 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
python获取中文字符串长度的方法
2018/11/14 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
详解Python 函数参数的拆解
2020/09/02 Python
Python学习之time模块的基本使用
2021/01/17 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
台湾森森购物网:U-mall
2017/10/16 全球购物
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
办公室文书岗位职责
2013/12/16 职场文书
《母鸡》教学反思
2014/02/25 职场文书
金融事务专业求职信
2014/04/25 职场文书
车间核算员岗位职责
2014/07/01 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
天河观后感
2015/06/11 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书