<head>\r
<title>Draggable - Automated Test Page</title>\r
<script type="text/javascript" src="../../jquery/jquery-1.2.5.js"></script>\r
+ <script type="text/javascript" src="jquery.pngfix.js"></script>\r
<script type="text/javascript" src="../../ui/source/ui.core.js"></script>\r
<script type="text/javascript" src="../../ui/source/ui.draggable.js"></script>\r
\r
<style type="text/css">\r
\r
html, body { height: 100%; }\r
-#realmouse { display: none; position: absolute; z-index: 1000; }\r
-#fakemouse { display: none; position: absolute; z-index: 2000; }\r
-.testing, .testing * { cursor: url(images/blank.cur), crosshair; }\r
-.testing #fakemouse { display: block !important; }\r
-.testing #realmouse { display: block !important; }\r
#main { height: 100%; }\r
#drag { width: 200px; height: 200px; background: #eef; }\r
\r
\r
var mouseX = 0, mouseY = 0;\r
\r
-$(function() {\r
-\r
-$(document).mousemove(function(e) {\r
- if (e.originalEvent && e.originalEvent.isTrusted) {\r
+function trackMouse(e) {\r
+ if (e.isTrusted !== false) {\r
mouseX = e.pageX;\r
mouseY = e.pageY;\r
}\r
-});\r
+}\r
+\r
+$(function() {\r
+\r
+$(document).bind("mousemove", trackMouse);\r
\r
});\r
\r
function testMouse(type, el, x, y) {\r
- var evt = document.createEvent("MouseEvents");\r
- evt.initMouseEvent("mouse" + type, true, true, window, 0, 0, 0, x, y, false, false, false, false, 0, null);\r
- el.dispatchEvent(evt);\r
+ var evt, e = {bubbles: true, cancelable: (type != "mousemove"), view: window, detail: 0,\r
+ screenX: 0, screenY: 0, clientX: x, clientY: y,\r
+ ctrlKey: false, altKey: false, shiftKey: false, metaKey: false,\r
+ button: 0, relatedTarget: null, isTrusted: false};\r
+ if ($.isFunction(document.createEvent)) {\r
+ evt = document.createEvent("MouseEvents");\r
+ if ($.isFunction(evt.initMouseEvent)) {\r
+ evt.initMouseEvent(type, e.bubbles, e.cancelable, e.view, e.detail,\r
+ e.screenX, e.screenY, e.clientX, e.clientY,\r
+ e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,\r
+ e.button, e.relatedTarget);\r
+ } else {\r
+ evt = document.createEvent("UIEvents");\r
+ evt.initEvent(type, bubbles, cancelable);\r
+ $.extend(evt, e);\r
+ }\r
+ el.dispatchEvent(evt);\r
+ } else if (document.createEventObject) {\r
+ evt = document.createEventObject();\r
+ $.extend(evt, e);\r
+ evt.button = 1;\r
+ el.fireEvent('on' + type, evt) \r
+ }\r
}\r
-function testMouseDown(el, x, y) { testMouse("down", el, x, y); }\r
-function testMouseMove(el, x, y) { testMouse("move", el, x, y); }\r
-function testMouseUp(el, x, y) { testMouse("up", el, x, y); }\r
+function testMouseDown(el, x, y) { testMouse("mousedown", el, x, y); }\r
+function testMouseMove(el, x, y) { testMouse("mousemove", el, x, y); }\r
+function testMouseUp(el, x, y) { testMouse("mouseup", el, x, y); }\r
\r
function draggableTest(el, dx, dy) {\r
- var realmouse = $("#realmouse");\r
- \r
+\r
var findCenter = function(el, offset) {\r
var o = el.offset();\r
return {\r
var left = center.x;\r
var top = center.y;\r
\r
- var fakemouse = $('<img src="images/cursor.png" id="fakemouse>');\r
- var realmouse = $('<img src="images/cursor.png" id="realmouse>');\r
+ var fakemouse = $('<img src="images/cursor.png" id="fakemouse"/>');\r
+ var realmouse = $('<img src="images/cursor.png" id="realmouse"/>');\r
+ if ($.browser.msie && $.browser.version == 6) {\r
+ fakemouse = $('<div id="fakemouse" style="height:23;width:16;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/cursor.png\', sizingMethod=\'scale\');" ></div>');\r
+ realmouse = $('<div><div id="realmouse" style="height:23;width:16;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/cursor.png\', sizingMethod=\'scale\');" ></div></div>');\r
+ }\r
var mousescreen = $('<div id="mousescreen"/>');\r
-\r
+ \r
var testStart = function() {\r
- fakemouse.appendTo('body').css({ left: mouseX, top: mouseY, opacity: 1.0 });\r
- realmouse.appendTo('body').css({ left: mouseX, top: mouseY, opacity: 0.2 })\r
+ fakemouse.appendTo('body').css({ position: 'absolute', left: mouseX, top: mouseY, zIndex: 5000 });\r
+ realmouse.appendTo('body').css({ position: 'absolute', left: mouseX, top: mouseY, zIndex: 5000, opacity: 0.1 })\r
.mousedown(function() { return false; });\r
mousescreen.appendTo('body').css({ width: '100%', height: '100%', position: 'absolute', top: 0, left: 0, zIndex: 5000 })\r
.mousemove(function(e) { realmouse.css({ left: e.pageX, top: e.pageY }); return false; })\r
.mousedown(function() { return false; })\r
- .mouseup(function() { return false; })\r
- $("body").addClass("testing");\r
+ .mouseup(function() { return false; });\r
+ (!$.browser.safari && mousescreen.css({ cursor: 'url(images/blank.cur), auto' }));\r
}\r
var testStop = function() {\r
- $("body").removeClass("testing");\r
mousescreen.remove();\r
+ mouseX = realmouse.css("left");\r
+ mouseY = realmouse.css("top");\r
realmouse.remove();\r
fakemouse.remove();\r
}\r
-\r
+ \r
testStart();\r
\r
var lastX = null;\r
+\r
fakemouse\r
- .animate({ left: left, top: top, opacity: 1.0 }, "fast", function() {\r
+ .animate({ left: left, top: top }, "fast", function() {\r
testMouseDown(el, left, top);\r
+ testMouseMove(el, left, top);\r
})\r
.animate({ left: left + dx, top: top + dy }, {\r
speed: "fast",\r
easing: "swing",\r
step: function (xory) {\r
- if (!lastX) { lastX = xory; }\r
- else { testMouseMove(el, lastX, xory); lastX = null; }\r
+ if (!lastX) {\r
+ lastX = xory;\r
+ } else {\r
+ testMouseMove(el, lastX, xory);\r
+ lastX = null;\r
+ }\r
},\r
complete: function() {\r
testMouseUp(el, 0, 0);\r
- $(this).animate({ left: realmouse.css("left"), top: realmouse.css("top"), opacity: 1.0 }, {\r
+ $(this).animate({ left: realmouse.css("left"), top: realmouse.css("top") }, {\r
speed: "fast",\r
complete: function() {\r
testStop();\r
})\r
}\r
});\r
+\r
}\r
\r
</script>\r
projects / jquery-ui.git / commitdiff