library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

tests automated draggable - improved to work in IE6, FF2, Safari, Opera

Browse Source
This commit is contained in:
Richard Worth 2008-05-24 20:52:04 +00:00
parent 813472aa8f
commit 9449c3f2b1
1 changed files with 60 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
ui/tests/autodrag.html
View File

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