mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-10-20 20:44:21 +00:00
167 lines
4.7 KiB
HTML
167 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Draggable - Automated Test Page</title>
|
|
<script type="text/javascript" src="../../jquery/jquery-1.2.6.js"></script>
|
|
<script type="text/javascript" src="../../ui/source/ui.core.js"></script>
|
|
<script type="text/javascript" src="../../ui/source/ui.draggable.js"></script>
|
|
|
|
<style type="text/css">
|
|
|
|
html, body { height: 100%; }
|
|
#main { height: 100%; }
|
|
#drag { width: 200px; height: 200px; background: #eef; }
|
|
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var mouseX = 0, mouseY = 0;
|
|
|
|
function trackMouse(e) {
|
|
if (e.isTrusted !== false) {
|
|
mouseX = e.pageX;
|
|
mouseY = e.pageY;
|
|
}
|
|
}
|
|
|
|
$(function() {
|
|
|
|
$(document).bind("mousemove", trackMouse);
|
|
|
|
});
|
|
|
|
function testMouse(type, el, x, y) {
|
|
var evt, e = {bubbles: true, cancelable: (type != "mousemove"), view: window, detail: 0,
|
|
screenX: 0, screenY: 0, clientX: x, clientY: y,
|
|
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("mousedown", el, x, y); }
|
|
function testMouseMove(el, x, y) { testMouse("mousemove", el, x, y); }
|
|
function testMouseUp(el, x, y) { testMouse("mouseup", el, x, y); }
|
|
|
|
function draggableTest(el, dx, dy) {
|
|
|
|
var findCenter = function(el, offset) {
|
|
var o = el.offset();
|
|
return {
|
|
x: (o.left + (offset || [0, 0])[0] || 0) + el.width() / 2,
|
|
y: (o.top + (offset || [0, 0])[1] || 0) + el.height() / 2
|
|
};
|
|
};
|
|
|
|
var center = findCenter($(el));
|
|
var left = center.x;
|
|
var top = center.y;
|
|
|
|
var fakemouse = $('<img src="images/cursor.png" id="fakemouse"/>');
|
|
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 testStart = function() {
|
|
fakemouse.appendTo('body').css({ position: 'absolute', left: mouseX, top: mouseY, zIndex: 5000 });
|
|
realmouse.appendTo('body').css({ position: 'absolute', left: mouseX, top: mouseY, zIndex: 5000, opacity: 0.1 })
|
|
.mousedown(function() { return false; });
|
|
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; })
|
|
.mousedown(function() { return false; })
|
|
.mouseup(function() { return false; });
|
|
(!$.browser.safari && mousescreen.css({ cursor: 'url(images/blank.cur), auto' }));
|
|
}
|
|
var testStop = function() {
|
|
mousescreen.remove();
|
|
mouseX = realmouse.css("left");
|
|
mouseY = realmouse.css("top");
|
|
realmouse.remove();
|
|
fakemouse.remove();
|
|
}
|
|
|
|
testStart();
|
|
|
|
var lastX = null;
|
|
|
|
fakemouse
|
|
.animate({ left: left, top: top }, "fast", function() {
|
|
testMouseDown(el, left, top);
|
|
testMouseMove(el, left, top);
|
|
})
|
|
.animate({ left: left + dx, top: top + dy }, {
|
|
speed: "fast",
|
|
easing: "swing",
|
|
step: function (xory) {
|
|
if (!lastX) {
|
|
lastX = xory;
|
|
} else {
|
|
testMouseMove(el, lastX, xory);
|
|
lastX = null;
|
|
}
|
|
},
|
|
complete: function() {
|
|
testMouseUp(el, 0, 0);
|
|
$(this).animate({ left: realmouse.css("left"), top: realmouse.css("top") }, {
|
|
speed: "fast",
|
|
complete: function() {
|
|
testStop();
|
|
}
|
|
})
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
|
|
$("#drag").draggable();
|
|
|
|
$('#begin').click(function(e) {
|
|
draggableTest($("#drag")[0], 100, 10);
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div id="main">
|
|
|
|
<h1>jQuery UI Draggable - Automated Test</h1>
|
|
|
|
<div style="height: 3em;"><button id="begin">Run Test</button></div>
|
|
|
|
<div id="drag">
|
|
Drag me
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|