原生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中获取选中对象的类型
Apr 02 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 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 array_flip() 删除数组重复元素
2009/01/14 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
php实现socket推送技术的示例
2017/12/20 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
新闻内页-JS分页
2006/06/07 Javascript
Mootools 1.2教程 函数
2009/09/15 Javascript
JavaScript 数组运用实现代码
2010/04/13 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
Python文件及目录操作实例详解
2015/06/04 Python
Python数据操作方法封装类实例
2017/06/23 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
python socket 聊天室实例代码详解
2019/11/14 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
仓管员岗位职责范文
2013/11/08 职场文书
后勤主管工作职责
2013/12/07 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
保护校园环境倡议书
2015/04/28 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
办公室卫生管理制度
2015/08/04 职场文书
《火烧云》教学反思
2016/02/23 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang