原生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 相关文章推荐
JavaScript实用技巧(一)
Aug 16 Javascript
JavaScript全局函数使用简单说明
Mar 11 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 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实现选择排序的解决方法
2013/05/04 PHP
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
jQuery 技巧小结
2010/04/02 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
Javascript中replace()小结
2015/09/30 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
python实现低通滤波器代码
2020/02/26 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
python中return不返回值的问题解析
2020/07/22 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
三星美国官网:Samsung美国
2017/02/06 全球购物
师德师风演讲稿
2014/05/05 职场文书
股东授权委托书范文
2014/09/13 职场文书
工作保证书怎么写
2015/02/28 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android