Javascript drag Image 4

Now we use Firefox's latest version 13.0 for testing. If you do not work, the image will automatically return to its original position.

Install the firebug extension and debug it.

Click Enable in the console window,

The error message is:

Window. event is undefined.

Firefox does not support window. event, so all the places that use event should be written like this:

Function mousedown (e) {'use strict '; E = E | window. event; // The window must be written in this way. 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 ;}}

After this error is solved, test that chrome and IE6 are working normally, but Firefox is still not working. When the left mouse button is released, the image is still running.

Note: In ubuntu12.04 + firefox1_+ firebug1.9, debug can easily make Firefox die.

This problem occurs because the Firefox mouseup event is not triggered. Use the following code to solve the problem. In the mousedown function, add:

if(e.preventDefault) {e.preventDefault();}else {e.returnValue = false;}

In this way, the mouseup event will be triggered normally. Refactor the code and use jslint4java to scan the code. Now, the Code compatible with IE6 SP3, firefoxghost, and chrome appears:

/*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;}

It is really not easy to develop a front-end. I have not tested IE7, 8, and 9 yet!