原生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 autocomplete自动完成插件的的使用方法
Aug 07 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
js实现搜索提示框效果
Sep 05 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 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字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
浅谈js的异步执行
2016/10/18 Javascript
js实现右键菜单功能
2016/11/28 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
python交换两个变量的值方法
2019/01/12 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
Python学习之os模块及用法
2020/06/03 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
测试时代收集的软件测试面试题
2013/09/25 面试题
驾驶员安全责任书范本
2014/07/24 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
2014年材料员工作总结
2014/11/19 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
如何利用golang运用mysql数据库
2022/03/13 Golang
MySQL 数据表操作
2022/05/04 MySQL