拖拽原理：
鼠标按下时，记录当前鼠标和拖动层的坐标，并且拖动状态设为可拖动；
鼠标移动时，判断拖动状态，如果可拖动，那么根据当前的鼠标坐标以及鼠标按下时记录的初始坐标，计算出拖动层的位置，实行拖动；
鼠标弹起时，将拖动状态改为不可拖动。
遇到的问题：
1.移动较快时，拖拽失效；
2.火狐中，拖拽动作与浏览器的某些功能有冲突，导致动作不流畅或失效；
下面我一步步的把我的修改过程贴出来，大家一起交流啊~
-
等级
本版专家分：50结帖率 68.18% -
一个简单的拖拽研究了快一周，恶心的我呦...好在终于整明白了，下面和大家一起交流下。
拖拽原理：
鼠标按下时，记录当前鼠标和拖动层的坐标，并且拖动状态设为可拖动；
鼠标移动时，判断拖动状态，如果可拖动，那么根据当前的鼠标坐标以及鼠标按下时记录的初始坐标，计算出拖动层的位置，实行拖动；
鼠标弹起时，将拖动状态改为不可拖动。
遇到的问题：
1.移动较快时，拖拽失效；
2.火狐中，拖拽动作与浏览器的某些功能有冲突，导致动作不流畅或失效；
下面我一步步的把我的修改过程贴出来，大家一起交流啊~
展开阅读全文
-
等级
本版专家分：50
-
一、最基本的拖动
能实现拖动，但是速度稍快点就会出问题。
另外：Y0=parseInt(moveObj.style.top+0);//？不清楚为什么一定要+0
<html>
<head>
<style>
#move{cursor:move; position:absolute; width:100px; height:100px; background:green;}
</style>
<script language="javascript">
//载入完成时执行
window.onload=function(){
var moveable=false;//初始化是否可拖动
var X0,Y0,eX0,eY0;//声明变量
var moveObj=document.getElementById('move');//获取到拖动对象
//鼠标按下
moveObj.onmousedown=function(e){//e只是一个参数，表示一个事件，名称可随便起
e=e||event;//鼠标事件在火狐里存在内存中可供函数直接调用；在IE里存放在window对象中,即window.event
eX0= e.clientX;//记录下拖动对象的坐标X0,Y0
eY0= e.clientY;
X0=parseInt(moveObj.style.left+0);//记录下mousedown事件发生时，鼠标的坐标eX0,eY0
Y0=parseInt(moveObj.style.top+0);//？不清楚为什么一定要+0
moveable=true;//拖动状态改为可拖动
}
//鼠标移动
moveObj.onmousemove=function(e){
if (moveable==true)
{
e=e||event;
var eX1= e.clientX;
var eY1= e.clientY;
moveObj.style.left=X0+eX1-eX0+"px";//由鼠标刚按下时记录的各个初始值，计算当前拖动对象的坐标
moveObj.style.top=Y0+eY1-eY0+"px";
}
}
//鼠标弹起
moveObj.onmouseup=function(e){
if(moveable) moveable=false;//状态改为不可拖动
}
}
</script>
</head>
<body>
<div id="move"></div>
</body>
</html>
-
等级
本版专家分：50
-
二、解决拖拽速度较快时的bug
不知道上一种，先获取拖动对象，根据对象的事件来拖动的方式有什么错误的地方，但是它在拖拽较快的时候确实有问题。
百度了下，还有另一种方式，就是把事件全加在document上，然后判断事件目标是否为要拖拽的元素。我感觉应该是这种方式浏览器可以及时地感应到任何一个位置发生的事件，不至于鼠标移得快了就跟不上了...（菜鸟，欢迎交流~）
<html>
<head>
<style>
.move{cursor:move; position:absolute; width:100px; height:100px; background:green;}
</style>
<script language="javascript">
var X0,Y0;
var dragAble=false;
var dragObj;
document.onmousedown=function(e){
var oDragHandle=e? e.target:event.srcElement;
if(oDragHandle.className=='move')
{
dragObj=oDragHandle;
e=e||event;
eX0= e.clientX;
eY0= e.clientY;
X0=parseInt(dragObj.style.left+0);
Y0=parseInt(dragObj.style.top+0);
dragAble=true;
}
}
document.onmousemove=function(e){
if(dragObj)
{
e=e||event;
var eX1= e.clientX;
var eY1= e.clientY;
dragObj.style.left=X0+eX1-eX0+"px";
dragObj.style.top=Y0+eY1-eY0+"px";
}
}
document.onmouseup=function(e){
if(dragObj) dragObj=null;
}
</script>
</head>
<body>
<div class="move"></div>
</body>
</html>
-
等级
本版专家分：50
-
三、完美兼容火狐
火狐不知道是具体是怎么回事，拖拽的时候，它会有个虚影，然后mouseup事件响应也有很严重的bug，很影响效果。
解决办法有两个：
1.在拖动块里加上内容，不论是空标签还是嵌套别的东西，只要是有内容，就不会出现那个虚影的问题；
2.样式控制，禁止选中。-moz-user-select:none;/*火狐禁止选中*/
下面代码中采用的第二种办法。
<html>
<head>
<style>
.move{cursor:move; position:absolute; width:100px; height:100px; background:green;-moz-user-select:none;/*火狐禁止选中*/}
</style>
<script language="javascript">
var X0,Y0;
var dragAble=false;
var dragObj;
document.onmousedown=function(e){
var oDragHandle=e? e.target:event.srcElement;
if(oDragHandle.className=='move')
{
dragObj=oDragHandle;
e=e||event;
eX0= e.clientX;
eY0= e.clientY;
X0=parseInt(dragObj.style.left+0);
Y0=parseInt(dragObj.style.top+0);
dragAble=true;
}
}
document.onmousemove=function(e){
if(dragObj)
{
e=e||event;
var eX1= e.clientX;
var eY1= e.clientY;
dragObj.style.left=X0+eX1-eX0+"px";
dragObj.style.top=Y0+eY1-eY0+"px";
}
}
document.onmouseup=function(e){
if(dragObj) dragObj=null;
}
</script>
</head>
<body>
<div class="move"><!--<br/>如果样式规定里此div可选，并且没有内容的话，火狐会有bug--></div>
</body>
</html>
-
等级
本版专家分：57 -
学习了。mark!!
-
等级
本版专家分：1 -
不错，拿着了 研究下看看 哈哈
-
等级
本版专家分：659 -
建议看下别人的代码，代码这东西，不是说写少了效率就高，写多了效率就低
-
等级
本版专家分：659
-
+0 应该是在做一个数据类型转化，即+完后就变成数字了
-
等级
本版专家分：51
-
谢谢LZ分享
-
等级
本版专家分：50
-
嗯，同意，我就是自己没写出来，百度的别人的，然后整合了一下。
短一点的话效率我不大清楚，不过对初学者来说肯定是容易理解点儿。
然后那个拖拽的实现方式上。我觉得思路应该只有这个思路了。
还有那个+0，我觉得很别扭，明明parseInt(）已经转成整形了，为什么要在里面写个+0呢？
-
等级
本版专家分：5052勋章
-
- 签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！
-
-
不错啊
- 关于HTML/CSS/JS常见兼容性整理
13 标准网页布局的兼容性处理 标准网页设计的最大挑战不在于技术本身，而在于浏览器兼容性处理。所谓浏览器兼容问题，就是当我们使用不同的浏览器（如IE 7、IE 6、Firefox等）访问同一个页面时，可能会出现不...
- 浏览器兼容性(手机、电脑。js、html、css)
浏览器兼容性 13 标准网页布局的兼容性处理 标准网页设计的最大挑战不在于技术本身，而在于浏览器兼容性处理。所谓浏览器兼容问题，就是当我们使用不同的浏览器（如IE 7、IE 6、Firefox等）访问同一...
- Js-关于Js事件看这一篇就够了！
1. js事件是事件驱动性语言，可分为系统派发事件，自定义派发事件 2. javascript 中事件分类有： MouseEvent（鼠标事件） InputEvent （input事件） KeyboardEvent（键盘事件） WheelEvent （滚轮事件） Event对象 ...
- js面试题
1、介绍js的基本数据类型 答： Undefined、Null、Boolean、Number、String 2、js有哪些内置对象？ 答：数据封装类对象：Object、Array、Boolean、Number 和 String 其他对象：Function、...
- Js基础部分详记
基于对象：对象是js中的一种数据，包含了一些方法，这些方法可以解决js中的一些最基本的操作。(对象只能解决基础问题) 由事件驱动：主要是用来解决浏览器和用户之间的交互问题的。用户对浏览器页面进行操作
- JavaScript学习笔记--进阶之路
了解js特性&事件使用 20200316 1、JavaScript简介 历史： 第一个浏览器 就是文本和图片 网景公司 增强用户的使用体验 急需一门语言 实现用户和网页之间的交互 诞生：为了实现用户和网页的交互而出现 1、...
- javaScript学习笔记
js学习笔记 js组成部分：ECMAScript标准规范，DOM文档对象模型，控制标签，BOM浏览器对象模型，控制浏览器 标签获取： document.getElementById(’’); //通过id名获取元素，只能获取一次，再用只能重新获取 ? 标签...
- JavaScript面试
JavaScript面试Web WorkersWebSQL如何实现浏览器内多个标签页之间的通信? (阿里)WebSocket客户端存储HTML5的离线储存工作原理iframe有那些优缺点？闭包JavaScript原型，原型链javascript是面向对象的，怎么体现...
- 最全前端面试问题及答案总结
原帖子：... ...CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 ...JavaScript： 数据类型、面向对象、继承、闭包...
- 初识JavaScript
Javascript和Java也就语法有些类似，本质上是完全不一样的东西。有了Java基础入门JS比较简单。总体上讲，JavaScript是一种脚本编程语言，不需要编译，边解释边执行。JS是一种基于对象的语言，因为它的语法中没有类，...
- js第一篇（基础）
外联后script里面不需要写代码 script可以和style一样放在页面任意位置 初期建议放在/body和/html之间 注释： // /**/ 输出语句： 加载至文档流：document.write（）； 用户提示：alert(); 删除前的进一步提示：...
- 前端基础面试题总结大全(一)
7.TCP和UDP的区别 tcp是传输控制协议，基于连接协议，给连接对方提供可靠的传输，一个tcp传输需要经过三次...即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构； 2).语义化HTML会使HTML结构变的清晰，
- 经典js面试题
js： cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。 第一：每个特定的域名下最多生成20个cookie 1.IE6或更低版本最多20个cookie 2.IE7和之后的版本最后可以有50个...
- JS题目
1.请你谈谈Cookie的弊端 cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。 第一：每个特定的域名下最多生成20个cookie 1.IE6或更低版本最多20个cookie ...IE和Ope...
- 前端面试题
前端面试题汇总 ... 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 21 ... 21 Quirks模式是什么？它和Standards模式有什么区别 21 div+css的布局较table布局有什么优点？...img的alt与title有何异同？...
- JS基础
JS JavaScript是什么 轻量级 弱类型 脚本语言 JavaScript 的作用 实现页面的交互 : 用户操作的交互 , 数据的交互 JavaScript 的组成部分 1, ECMAScript JavaScript的基本语法规范 2, DOM 文档对象模型 –...
- Html5+js测试题【完整版】
一.闭包的理解:使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。闭包三个特性: 1.... ...
- javascript学习笔记整理
javascript从零到精通笔记整理 js写在哪 - css写在哪 - 内联（行内）：属性形式：style="样式属性:样式属性值" - 内部：style双标签，包裹css样式 - 外部（外联）：link单标签，的href属性，引入css文件的路径 ...
- javascript
javascript:事件驱动的，可嵌入式的，基于... 在要书写JavaScript的网页中创建一个js代码标签。JavaScript在内容可以放到任何的一个位置，但这样的方式仅限于不对document元素修改的情况下。除非在函数中。 【行内】
- js常见面试
1.一些开放性题目 1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。 2.项目介绍 3.如何看待前端开发？ ...absolute:生成绝对定位的元素， 相对于最近一...
- 【干货分享】前端面试知识点锦集01（HTML篇）——附答案
构成：结构层、表示层、行为层分别是：HTML、CSS、JavaScript作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。 2、HTML5的优点与缺点？ 优点：a、网络标准统一、HTML5...
- 前端面试题整理2020
1.一些开放性题目 1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。 2.项目介绍 3.如何看待前端开发？ 4.平时是如何学习前端...§ fixed （老IE不支持）生成绝对定位的元素，通常相
- 2020最系统的前端面试题大全
目录 ... 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 20 ... 20 Quirks模式是什么？它和Standards模式有什么区别?...div+css的布局较table布局有什么优点？...你能描述一下渐进增强和优雅降级之间的不同吗?...
- 最全前端问题及答案总结[转]
前端开发面试知识点大纲： ...CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、...JavaScript： 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事...
- 高频前端开发面试问题及答案整理
说说你对闭包的理解 使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。...1.IE6或更低版本最多20个cookie
- 2017年前端面试题整理汇总100道题
1.一些开放性题目 1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。 2.项目介绍 3.如何看待前端开发？...position的值， relative和absolute分别是相对于谁进行定位的？...
- 前端面试宝典 html css js ajax es6
面试宝典 ... 1. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 1 ... 1 ...3. Quirks模式是什么？它和Standards模式有什么区别 1 ...4. div+css的布局较table布局有什么优点？...7. 为什么利用多个域名来存...
- 【干货分享】前端面试知识点锦集01（HTML+CSS篇）—— 附答案
1. 浏览器页面有哪三层构成，分别是什么，作用是什么?参考答案 构成：结构层、表示层、行为层 分别是：HTML、CSS、JavaScript 作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端...
- 前端基础知识总结
1.null和undefined的区别? null是一个空对象指针,指向一个空对象 undefined是找不到 2.null的使用场景 作为对象原型链的终点 作为函数的参数,表示该函数的参数不是对象 让一个对象变成垃圾对象 ...
- 前端面试题整理-JS
JS For-in、Object.keys、Object.getOwnPropertyNames、Object.getOwnPropertySymbols、Reflect.ownKeys区别 For-in:遍历自身和继承的可枚举属性，不含Symbol属性。 Object.keys（obj）：返回数组，包含...