<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
+ <script type="text/javascript" src="ui.testmouse.js"></script>\r
+\r
<style type="text/css">\r
\r
-html, body { height: 95%; }\r
+html, body { height: 100%; }\r
#main { height: 100%; }\r
-#drag { cursor: move; width: 200px; height: 200px; background: #eef; }\r
+.drag { position: relative; margin: 10px; padding: 10px; border: 3px solid black; cursor: move; width: 200px; height: 40px; background: #eef; }\r
\r
</style>\r
\r
<script type="text/javascript">\r
\r
-var mouseX = 0, mouseY = 0;\r
-\r
-function trackMouse(e) {\r
- if (e.isTrusted !== false) {\r
- mouseX = e.pageX;\r
- mouseY = e.pageY;\r
- }\r
-}\r
-\r
-$(function() {\r
-\r
-$(document).bind("mousemove", trackMouse);\r
-\r
-});\r
-\r
-function testMouse(type, el, x, y) {\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("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
-\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 OS = (/(win|mac|linux)/i.exec(navigator.platform) || ['other'])[0].toLowerCase();\r
-\r
- var defaultUrl = ['cursors', OS == 'other' ? 'win' : OS, 'default.png'].join('/');\r
- var cursorUrl = function() {\r
- return ['cursors', OS == 'other' ? 'win' : OS, $(el).css('cursor') + '.png'].join('/');\r
- }\r
- var noneUrl = ['cursors', OS == 'other' ? 'win' : OS, 'none.cur'].join('/');\r
-\r
- var fakemouse = $('<img src="' + defaultUrl + '" id="fakemouse" />');\r
- var realmouse = $('<img src="' + defaultUrl + '" id="realmouse" />');\r
- if ($.browser.msie && $.browser.version == 6) {\r
- fakemouse = $('<div id="fakemouse" style="height:32;width:32;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\');" ></div>');\r
- realmouse = $('<div><div id="realmouse" style="height:32;width:32;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\');" ></div></div>');\r
- }\r
- var mousescreen = $('<div id="mousescreen"/>');\r
-\r
- var updateCursor = function() {\r
- if ($.browser.msie && $.browser.version == 6) {\r
- fakemouse.css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + cursorUrl() + '\', sizingMethod=\'scale\'');\r
- } else {\r
- fakemouse.attr('src', cursorUrl());\r
- }\r
- }\r
- var resetCursor = function() {\r
- if ($.browser.msie && $.browser.version == 6) {\r
- fakemouse.css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\'');\r
- } else {\r
- fakemouse.attr('src', defaultUrl);\r
- }\r
- }\r
- \r
- var testStart = function() {\r
- $(el).bind("mouseover", updateCursor).bind("mouseout", resetCursor);\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
- 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
- mousescreen.css('cursor', 'url(' + noneUrl + '), crosshair');\r
- (($.browser.safari || $.browser.opera) && mousescreen.css('cursor', 'crosshair'));\r
- }\r
- var testStop = function() {\r
- $(el).unbind("mouseover", updateCursor).unbind("mouseout", resetCursor);\r
- mousescreen.remove();\r
- mouseX = realmouse.css("left");\r
- mouseY = realmouse.css("top");\r
- realmouse.remove();\r
- fakemouse.remove();\r
- }\r
- \r
- testStart();\r
-\r
- var lastX = null;\r
-\r
- fakemouse\r
- .animate({ left: left, top: top }, "slow", function() {\r
- $(el).triggerHandler('mouseover');\r
- testMouseDown(el, left, top);\r
- testMouseMove(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) {\r
- lastX = xory;\r
- } else {\r
- var x = lastX, y = xory;\r
- testMouseMove(el, x, y);\r
- lastX = null;\r
- }\r
- },\r
- complete: function() {\r
- $(el).triggerHandler('mouseout');\r
- testMouseUp(el, 0, 0);\r
- $(this).animate({ left: realmouse.css("left"), top: realmouse.css("top") }, {\r
- speed: "slow",\r
- complete: function() {\r
- testStop();\r
- }\r
- })\r
- }\r
- });\r
-\r
-}\r
\r
</script>\r
\r
<script type="text/javascript">\r
$(function() {\r
\r
- $("#drag").draggable();\r
+ $(".drag").draggable().testMouse({\r
+ speed: "fast"\r
+ });\r
\r
$('#begin').click(function(e) {\r
- draggableTest($("#drag")[0], 100, 10);\r
+ $("#status").text("Running...");\r
+ $(".drag:eq(0)").testMouse("drag", 100, 0, function() {\r
+ $('#status').text("Ready");\r
+ });\r
});\r
\r
});\r
\r
<h1>jQuery UI Draggable - Automated Test</h1>\r
\r
+ Status: <span id="status">Ready</span>\r
+\r
<div style="height: 3em;"><button id="begin">Run Test</button></div>\r
\r
- <div id="drag">\r
- Drag me\r
+ <div class="drag">\r
+ Drag 1\r
+ </div>\r
+\r
+ <div class="drag">\r
+ Drag 2\r
+ </div>\r
+\r
+ <div class="drag">\r
+ Drag 3\r
</div>\r
\r
</div>\r
--- /dev/null
+/*\r
+ * jQuery UI testMouse\r
+ *\r
+ * Copyright (c) 2008 Richard D. Worth (rdworth.org)\r
+ * Dual licensed under the MIT (MIT-LICENSE.txt)\r
+ * and GPL (GPL-LICENSE.txt) licenses.\r
+ * \r
+ * Revision: $Id: $\r
+ */\r
+;(function($) {\r
+\r
+ $.widget("ui.testMouse", {\r
+ mouseX: 0,\r
+ mouseY: 0,\r
+ trackMouse: function() {},\r
+ init: function() {\r
+ var self = this;\r
+ this.trackMouse = function(e) {\r
+ if (e.isTrusted !== false) {\r
+ self.mouseX = e.pageX;\r
+ self.mouseY = e.pageY;\r
+ }\r
+ }\r
+ $(document).bind("mousemove", this.trackMouse);\r
+ },\r
+ destroy: function() {\r
+ $(document).unbind("mousemove", this.trackMouse);\r
+ },\r
+ center: function(offset) {\r
+ var o = this.element.offset();\r
+ return {\r
+ x: (o.left + (offset || [0, 0])[0] || 0) + this.element.width() / 2,\r
+ y: (o.top + (offset || [0, 0])[1] || 0) + this.element.height() / 2\r
+ };\r
+ },\r
+ dispatch: function(type, x, y, button, relatedTarget) {\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: button || 0, relatedTarget: relatedTarget, 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
+ this.element[0].dispatchEvent(evt);\r
+ } else if (document.createEventObject) {\r
+ evt = document.createEventObject();\r
+ $.extend(evt, e);\r
+ evt.button = 1;\r
+ this.element[0].fireEvent('on' + type, evt) \r
+ }\r
+ },\r
+ down: function(x, y) {\r
+ this.dispatch("mousedown", x, y);\r
+ },\r
+ move: function(x, y) {\r
+ this.dispatch("mousemove", x, y);\r
+ },\r
+ up: function(x, y) {\r
+ this.dispatch("mouseup", x, y);\r
+ },\r
+ drag: function(dx, dy, complete) {\r
+ var self = this; \r
+\r
+ var center = this.center();\r
+ this.left = center.x;\r
+ this.top = center.y;\r
+ \r
+ var OS = (/(win|mac|linux)/i.exec(navigator.platform) || ['other'])[0].toLowerCase();\r
+ \r
+ var defaultUrl = ['cursors', OS == 'other' ? 'win' : OS, 'default.png'].join('/');\r
+ var cursorUrl = function() {\r
+ return ['cursors', OS == 'other' ? 'win' : OS, self.element.css('cursor') + '.png'].join('/');\r
+ }\r
+ var noneUrl = ['cursors', OS == 'other' ? 'win' : OS, 'none' + ($.browser.safari ? '.png' : '.cur')].join('/');\r
+ \r
+ var fakemouse = $('<img src="' + defaultUrl + '" />');\r
+ var realmouse = $('<img src="' + defaultUrl + '" />');\r
+ if ($.browser.msie && $.browser.version == 6) {\r
+ fakemouse = $('<div style="height:32;width:32;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\');" ></div>');\r
+ realmouse = $('<div><div style="height:32;width:32;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\');" ></div></div>');\r
+ }\r
+ var mousescreen = $('<div/>');\r
+ \r
+ var updateCursor = function() {\r
+ if ($.browser.msie && $.browser.version == 6) {\r
+ fakemouse.css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + cursorUrl() + '\', sizingMethod=\'scale\'');\r
+ } else {\r
+ fakemouse.attr('src', cursorUrl());\r
+ }\r
+ }\r
+ var resetCursor = function() {\r
+ if ($.browser.msie && $.browser.version == 6) {\r
+ fakemouse.css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\'');\r
+ } else {\r
+ fakemouse.attr('src', defaultUrl);\r
+ }\r
+ }\r
+ \r
+ var testStart = function() {\r
+ self.element.bind("mouseover", updateCursor).bind("mouseout", resetCursor);\r
+ fakemouse.appendTo('body').css({ position: 'absolute', left: self.mouseX, top: self.mouseY, zIndex: 5000 });\r
+ realmouse.appendTo('body').css({ position: 'absolute', left: self.mouseX, top: self.mouseY, zIndex: 5000, opacity: 0.1 });\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
+ mousescreen.css('cursor', 'url(' + noneUrl + '), crosshair');\r
+ ($.browser.opera && mousescreen.css('cursor', 'crosshair'));\r
+ }\r
+ var testStop = function() {\r
+ self.element.unbind("mouseover", updateCursor).unbind("mouseout", resetCursor);\r
+ mousescreen.remove();\r
+ self.mouseX = realmouse.css("left");\r
+ self.mouseY = realmouse.css("top");\r
+ realmouse.remove();\r
+ fakemouse.remove();\r
+ ($.isFunction(complete) && complete.apply());\r
+ }\r
+ \r
+ testStart();\r
+ \r
+ this.lastX = null;\r
+ \r
+ fakemouse\r
+ .animate({ left: this.left, top: this.top }, this.options.speed, function() {\r
+ self.element.triggerHandler('mouseover');\r
+ self.down(self.left, self.top);\r
+ self.move(self.left, self.top);\r
+ })\r
+ .animate({ left: this.left + dx, top: this.top + dy }, {\r
+ speed: self.options.speed,\r
+ easing: "swing",\r
+ step: function (xory) {\r
+ if (!self.lastX) {\r
+ self.lastX = xory;\r
+ } else {\r
+ var x = self.lastX, y = xory;\r
+ self.move(x, y);\r
+ self.lastX = null;\r
+ }\r
+ },\r
+ complete: function() {\r
+ self.element.triggerHandler('mouseout');\r
+ self.up(0, 0);\r
+ $(this).animate({ left: realmouse.css("left"), top: realmouse.css("top") }, {\r
+ speed: self.options.speed,\r
+ complete: function() {\r
+ testStop();\r
+ }\r
+ })\r
+ }\r
+ });\r
+ \r
+ }\r
+ });\r
+\r
+ $.ui.testMouse.defaults = {\r
+ speed: "slow"\r
+ }\r
+\r
+})(jQuery);\r
projects / jquery-ui.git / commitdiff
