--- /dev/null
+<!DOCTYPE html>\r
+<html lang="en">\r
+<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="../../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
+</style>\r
+\r
+<script type="text/javascript">\r
+$(function() {\r
+\r
+ var fakemouse = $('<img src="images/cursor.png" id="fakemouse>').appendTo('body')\r
+ .css({ opacity: 0.0 })\r
+ .hide();\r
+\r
+ var realmouse = $('<img src="images/cursor.png" id="realmouse>').appendTo('body')\r
+ .css({ opacity: 0.2 })\r
+ .hide()\r
+ .mousedown(function() { return false; });\r
+ \r
+ $(document).mousemove(function(e) {\r
+ if (e.originalEvent && e.originalEvent.isTrusted) {\r
+ realmouse.css({\r
+ left: e.pageX,\r
+ top: e.pageY\r
+ });\r
+ }\r
+ });\r
+\r
+});\r
+</script>\r
+\r
+<script type="text/javascript">\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
+}\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
+\r
+function draggableTest(el, dx, dy) {\r
+ var realmouse = $("#realmouse");\r
+ \r
+ var findCenter = function(el, offset) {\r
+ var o = el.offset();\r
+ return {\r
+ x: (o.left + (offset || [0, 0])[0] || 0) + el.width() / 2,\r
+ y: (o.top + (offset || [0, 0])[1] || 0) + el.height() / 2\r
+ };\r
+ };\r
+\r
+ var center = findCenter($(el));\r
+ var left = center.x;\r
+ var top = center.y;\r
+\r
+ var lastX = null;\r
+\r
+ var testStart = function() {\r
+ $(el).data("_ignoreTrusted.draggable", true);\r
+ $("body").addClass("testing");\r
+ }\r
+ var testStop = function() {\r
+ $("body").removeClass("testing");\r
+ $(el).data("_ignoreTrusted.draggable", false); \r
+ }\r
+\r
+ testStart();\r
+\r
+ $('#fakemouse').css({ left: realmouse.css("left"), top: realmouse.css("top") })\r
+ .animate({ left: left, top: top, opacity: 1.0 }, "slow", function() {\r
+ testMouseDown(el, left, top);\r
+ })\r
+ .animate({ left: left + dx, top: top + dy }, {\r
+ speed: "slow",\r
+ easing: "swing",\r
+ step: function (xory) {\r
+ if (!lastX) { lastX = xory; }\r
+ else { testMouseMove(el, lastX, xory); lastX = null; }\r
+ },\r
+ complete: function() {\r
+ testMouseUp(el, 0, 0);\r
+ $(this).animate({ left: realmouse.css("left"), top: realmouse.css("top"), opacity: 0 }, {\r
+ speed: "slow",\r
+ complete: function() {\r
+ testStop();\r
+ }\r
+ })\r
+ }\r
+ });\r
+}\r
+\r
+</script>\r
+\r
+<script type="text/javascript">\r
+$(function() {\r
+\r
+ $("#drag").draggable();\r
+\r
+ $('#begin').click(function(e) {\r
+ draggableTest($("#drag")[0], 100, 10);\r
+ });\r
+\r
+});\r
+</script>\r
+\r
+</head>\r
+<body>\r
+\r
+<div id="main">\r
+\r
+ <h1>jQuery UI Draggable - Automated Test</h1>\r
+\r
+ <div style="height: 3em;"><button id="begin">Run Test</button></div>\r
+\r
+ <div id="drag">\r
+ Drag me\r
+ </div>\r
+\r
+</div>\r
+ \r
+</body>\r
+</html>\r
projects / jquery-ui.git / commitdiff
