拖拽原理:
鼠标按下时,记录当前鼠标和拖动层的坐标,并且拖动状态设为可拖动;
鼠标移动时,判断拖动状态,如果可拖动,那么根据当前的鼠标坐标以及鼠标按下时记录的初始坐标,计算出拖动层的位置,实行拖动;
鼠标弹起时,将拖动状态改为不可拖动。
遇到的问题:
1.移动较快时,拖拽失效;
2.火狐中,拖拽动作与浏览器的某些功能有冲突,导致动作不流畅或失效;
下面我一步步的把我的修改过程贴出来,大家一起交流啊~
<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>
<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>
<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>
13 标准网页布局的兼容性处理 标准网页设计的最大挑战不在于技术本身,而在于浏览器兼容性处理。所谓浏览器兼容问题,就是当我们使用不同的浏览器(如IE 7、IE 6、Firefox等)访问同一个页面时,可能会出现不...
浏览器兼容性 13 标准网页布局的兼容性处理 标准网页设计的最大挑战不在于技术本身,而在于浏览器兼容性处理。所谓浏览器兼容问题,就是当我们使用不同的浏览器(如IE 7、IE 6、Firefox等)访问同一...
1. js事件是事件驱动性语言,可分为系统派发事件,自定义派发事件 2. javascript 中事件分类有: MouseEvent(鼠标事件) InputEvent (input事件) KeyboardEvent(键盘事件) WheelEvent (滚轮事件) Event对象 ...
1、介绍js的基本数据类型 答: Undefined、Null、Boolean、Number、String 2、js有哪些内置对象? 答:数据封装类对象:Object、Array、Boolean、Number 和 String 其他对象:Function、...
基于对象:对象是js中的一种数据,包含了一些方法,这些方法可以解决js中的一些最基本的操作。(对象只能解决基础问题) 由事件驱动:主要是用来解决浏览器和用户之间的交互问题的。用户对浏览器页面进行操作
了解js特性&事件使用 20200316 1、JavaScript简介 历史: 第一个浏览器 就是文本和图片 网景公司 增强用户的使用体验 急需一门语言 实现用户和网页之间的交互 诞生:为了实现用户和网页的交互而出现 1、...
js学习笔记 js组成部分:ECMAScript标准规范,DOM文档对象模型,控制标签,BOM浏览器对象模型,控制浏览器 标签获取: document.getElementById(’’); //通过id名获取元素,只能获取一次,再用只能重新获取 ? 标签...
JavaScript面试Web WorkersWebSQL如何实现浏览器内多个标签页之间的通信? (阿里)WebSocket客户端存储HTML5的离线储存工作原理iframe有那些优缺点?闭包JavaScript原型,原型链javascript是面向对象的,怎么体现...
原帖子:... ...CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 ...JavaScript: 数据类型、面向对象、继承、闭包...
Javascript和Java也就语法有些类似,本质上是完全不一样的东西。有了Java基础入门JS比较简单。总体上讲,JavaScript是一种脚本编程语言,不需要编译,边解释边执行。JS是一种基于对象的语言,因为它的语法中没有类,...
外联后script里面不需要写代码 script可以和style一样放在页面任意位置 初期建议放在/body和/html之间 注释: // /**/ 输出语句: 加载至文档流:document.write(); 用户提示:alert(); 删除前的进一步提示:...
7.TCP和UDP的区别 tcp是传输控制协议,基于连接协议,给连接对方提供可靠的传输,一个tcp传输需要经过三次...即使在没有CSS样式的条件下,也能很好地呈现出内容结构、代码结构; 2).语义化HTML会使HTML结构变的清晰,
js: cookie虽然在持久保存客户端数据提供了方便,分担了服务器存储的负担,但还是有很多局限性的。 第一:每个特定的域名下最多生成20个cookie 1.IE6或更低版本最多20个cookie 2.IE7和之后的版本最后可以有50个...
1.请你谈谈Cookie的弊端 cookie虽然在持久保存客户端数据提供了方便,分担了服务器存储的负担,但还是有很多局限性的。 第一:每个特定的域名下最多生成20个cookie 1.IE6或更低版本最多20个cookie ...IE和Ope...
前端面试题汇总 ... 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 21 ... 21 Quirks模式是什么?它和Standards模式有什么区别 21 div+css的布局较table布局有什么优点?...img的alt与title有何异同?...
JS JavaScript是什么 轻量级 弱类型 脚本语言 JavaScript 的作用 实现页面的交互 : 用户操作的交互 , 数据的交互 JavaScript 的组成部分 1, ECMAScript JavaScript的基本语法规范 2, DOM 文档对象模型 –...
一.闭包的理解:使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。闭包三个特性: 1.... ...
javascript从零到精通笔记整理 js写在哪 - css写在哪 - 内联(行内):属性形式:style="样式属性:样式属性值" - 内部:style双标签,包裹css样式 - 外部(外联):link单标签,的href属性,引入css文件的路径 ...
javascript:事件驱动的,可嵌入式的,基于... 在要书写JavaScript的网页中创建一个js代码标签。JavaScript在内容可以放到任何的一个位置,但这样的方式仅限于不对document元素修改的情况下。除非在函数中。 【行内】
1.一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势。 2.项目介绍 3.如何看待前端开发? ...absolute:生成绝对定位的元素, 相对于最近一...
构成:结构层、表示层、行为层分别是:HTML、CSS、JavaScript作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。 2、HTML5的优点与缺点? 优点:a、网络标准统一、HTML5...
1.一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势。 2.项目介绍 3.如何看待前端开发? 4.平时是如何学习前端...§ fixed (老IE不支持)生成绝对定位的元素,通常相
目录 ... 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 20 ... 20 Quirks模式是什么?它和Standards模式有什么区别?...div+css的布局较table布局有什么优点?...你能描述一下渐进增强和优雅降级之间的不同吗?...
前端开发面试知识点大纲: ...CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、...JavaScript: 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事...
说说你对闭包的理解 使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。...1.IE6或更低版本最多20个cookie
1.一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势。 2.项目介绍 3.如何看待前端开发?...position的值, relative和absolute分别是相对于谁进行定位的?...
面试宝典 ... 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 1 ... 1 ...3. Quirks模式是什么?它和Standards模式有什么区别 1 ...4. div+css的布局较table布局有什么优点?...7. 为什么利用多个域名来存...
1. 浏览器页面有哪三层构成,分别是什么,作用是什么?参考答案 构成:结构层、表示层、行为层 分别是:HTML、CSS、JavaScript 作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端...
1.null和undefined的区别? null是一个空对象指针,指向一个空对象 undefined是找不到 2.null的使用场景 作为对象原型链的终点 作为函数的参数,表示该函数的参数不是对象 让一个对象变成垃圾对象 ...
JS For-in、Object.keys、Object.getOwnPropertyNames、Object.getOwnPropertySymbols、Reflect.ownKeys区别 For-in:遍历自身和继承的可枚举属性,不含Symbol属性。 Object.keys(obj):返回数组,包含...