原生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遍历数组与筛选数组的方法
Nov 05 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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面向对象分析设计的经验原则
2008/09/20 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
Python的SQLAlchemy框架使用入门
2015/04/29 Python
python基础知识小结之集合
2015/11/25 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
python分布式编程实现过程解析
2019/11/08 Python
python实现简单的学生管理系统
2021/02/22 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
工作中的自我评价如何写好
2013/10/28 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
基于PyQt5制作一个群发邮件工具
2022/04/08 Python
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js