原生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 相关文章推荐
文本链接逐个出现的js脚本
Dec 12 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 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 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
Python实现批量修改文件名实例
2015/07/08 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
python的flask框架难学吗
2020/07/31 Python
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
C语言面试题
2013/05/19 面试题
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
用Python写一个for循环的例子
2016/07/19 面试题
服务中心夜班服务员岗位职责
2013/11/27 职场文书
最美家庭活动方案
2014/08/31 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技