原生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 解析Json字符串的性能比较分析代码
Dec 16 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
js实现星星打分效果
Jul 05 Javascript
谈谈JavaScript中的函数
Sep 08 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 COOKIE及时生效的方法介绍
2014/02/14 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
php绘制一条直线的方法
2015/01/24 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
javascript OFFICE控件测试代码
2009/12/08 Javascript
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
python多进程实现进程间通信实例
2017/11/24 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
python面向对象法实现图书管理系统
2019/04/19 Python
Django REST framework内置路由用法
2019/07/26 Python
python爬虫添加请求头代码实例
2019/12/28 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
windows下python安装pip方法详解
2020/02/10 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
西部世纪.net笔试题面试题
2014/04/03 面试题
C#实现启动一个进程
2016/10/01 面试题
Java面试题汇总
2015/12/06 面试题
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
Python常遇到的错误和异常
2021/11/02 Python