原生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入门知识简介
Mar 04 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
Vue 组件的挂载与父子组件的传值实例
Sep 02 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
资料注册后发信小技巧
2006/10/09 PHP
相对路径转化成绝对路径
2007/04/10 PHP
php读取msn上的用户信息类
2008/12/05 PHP
PHP mkdir()定义和用法
2009/01/14 PHP
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
PHP中串行化用法示例
2016/11/16 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
js自定义回调函数
2015/12/13 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
python实现rsa加密实例详解
2017/07/19 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
python SocketServer源码深入解读
2019/09/17 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
意大利团购网站:Groupon意大利
2016/10/11 全球购物
电大奖学金获奖感言
2014/08/14 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
交通事故被告代理词
2015/05/23 职场文书