原生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实现的网页局布刷新效果
Dec 01 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
jsonp原理及使用
Oct 28 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
Vue双向绑定实现原理与方法详解
May 07 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
一些星际专用术语解释
2020/03/04 星际争霸
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
php实现微信发红包功能
2018/07/13 PHP
php数组和链表的区别总结
2019/09/20 PHP
javascript 得到变量类型的函数
2010/05/19 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python进程间通信用法实例
2015/06/04 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
详解anaconda安装步骤
2020/11/23 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
初级Java程序员面试题
2016/03/03 面试题
董事长秘书岗位职责
2013/11/29 职场文书
给分销商的致歉信
2014/01/14 职场文书
工作会议欢迎词
2014/01/16 职场文书
家具商场的活动方案
2014/08/16 职场文书