现在用Firefox最新版本13.0测试,不work,图片会自动回到原位。
安装firebug扩展后调试一下。
到console窗口点击enable后,
错误信息是:
window.event is undefined.
Firefox不支持window.event,因此所有用到event的地方要类似这样写:
function mouseDown(e) {
'use strict';
e = e || window.event;//必须这样写
window.dragObj = e.currentTarget || e.srcElement;
if (window.dragObj !== null) {
window.clickLeft = e.x - parseInt(window.dragObj.style.left, 10);
window.clickTop = e.y - parseInt(window.dragObj.style.top, 10);
window.dragObj.style.zIndex += 1;
}
}
解决了这个错误后,测试一下Chrome和IE6,都工作正常,但是Firefox仍然不行。鼠标左键松开的时候,图片仍然跟着跑。
注意,在Ubuntu12.04+FireFox13.0+FireBug1.9下,debug很容易让Firefox死掉。
这个问题是因为Firefox的mouseUp事件没有被触发。用下面的代码可以解决,在mouseDown函数中,添加:
if(e.preventDefault) {
e.preventDefault();
}else {
e.returnValue = false;
}
这样mouseUp事件就能正常触发了。重构一下代码,再用jslint4java扫描一下,解决了书写格式后。现在一份同时兼容IE6 sp3, Firefox13.0,Chrome的代码出现了:
/*global window */
function getEvent(e) {
'use strict';
return e || window.event;
}
function getTarget(e) {
'use strict';
return e.currentTarget || e.srcElement;
}
function getPos(e) {
'use strict';
return {
x: e.x || e.clientX,
y: e.y || e.clientY
};
}
function mouseDown(e) {
'use strict';
e = getEvent(e);
window.dragObj = getTarget(e);
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
if (window.dragObj !== null) {
var pos = getPos(e);
window.clickLeft = pos.x - parseInt(window.dragObj.style.left, 10);
window.clickTop = pos.y - parseInt(window.dragObj.style.top, 10);
window.dragObj.style.zIndex += 1;
}
}
/**
* IE6.0 need this
*/
function mouseStop(e) {
'use strict';
e = getEvent(e);
e.returnValue = false;
}
function mouseMove(e) {
'use strict';
e = getEvent(e);
if (window.dragObj !== null) {
var pos = getPos(e);
window.dragObj.style.left = pos.x - window.clickLeft;
window.dragObj.style.top = pos.y - window.clickTop;
}
}
function mouseUp() {
'use strict';
window.dragObj = null;
}
function init() {
'use strict';
window.dragObj = null;
window.document.onmousemove = mouseMove;
window.document.onmouseup = mouseUp;
window.document.ondragstart = mouseStop;
}
做前端真的不容易啊。我还没有测试IE7,8,9呢!
分享到:
相关推荐
javascript拖拽图片到指定位置 。。。。。。。。。。。。。。。。。。。
javascript拖拽图片到指定位置.rar javascript拖拽图片到指定位置.rar javascript拖拽图片到指定位置.rar javascript拖拽图片到指定位置.rar javascript拖拽图片到指定位置.rar javascript拖拽图片到指定位置....
JavaScript图片拖动效果,纯粹的JS图片拖动效果!!
JavaScript 实现图片拖拽
这次我们来分享一款非常实用的JS插件,它可以很方便地帮你实现在网页上拖拽图片并交换图片。和其他的拖拽插件不同,当两张图片交换时,将会出现弹动的动画特效。并且会改变被交换图片的背景颜色,以标识该图片被交换...
JavaScript实现的图片切割,可以鼠标拖动选择切割区域,调节切割大小等。附有实例
这次要给大家介绍一款用纯JavaScript代码编写的图片拖动对比插件,利用它我们可以快速地找出图片的细微差异,我们可以通过滑动图片两边的滑杆,滑动的同时原始图片就随着被处理图片的移动而逐渐显示出来。...
可以用鼠标拖动图片,图片可以放大也可以缩小
打开html可直接查看例子,例子中图片url写死的,是一个网络图片,如果该图片不见了可直接更改那个地址。 完全是自己写的滚动和拖动行为
通过原生JavaScript+Css实现图片滑块效果,通过拖动按钮实现推拉门效果.
图片随意拖动放大缩小效果 javascript 代码,效果很好,有点类似于淘宝的效果
javascript 美化滚动条javascript 美化滚动条
本文实例讲述了JavaScript实现图片的放大缩小及拖拽功能。分享给大家供大家参考,具体如下: 实现效果如下: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
javascript实现对图片的截取(根据拖动层实现对图片截取部分的定位)
经典中的经典。大家一起学习。
js实现鼠标在特定框内拖动图片,鼠标位置超出框则无法移动。
08:___Javascript仿Flash图片轮翻 09:___JavaScript图片滚动(绝对酷) 10:___JavaScript生成弹性透明的图片放大代码 11:___JavaScript由左向右的图片渐变过渡 12:___JavaScript动态控制图片透明度的变化 13:___...
实现图片的滑轮滚动放大预览、拖动、旋转功能,此文件为完整页面demo及JS文件
Javascript的特点是dom的处理与网页效果,大多数情况我们只用到了这个语言的最简单的功能,比如制作图片轮播/网页的tab等等,这篇文章将向你展示如何在自己的网页上制作拖拽
基于JavaScript实现图片截图可放大缩小拖动特效源码.zip