diff options
| author | Paul Bakaus <paul.bakaus@googlemail.com> | 2008-06-01 13:24:37 +0000 |
|---|---|---|
| committer | Paul Bakaus <paul.bakaus@googlemail.com> | 2008-06-01 13:24:37 +0000 |
| commit | 60ae201d2fa5732c5f80db69d1560f7cbde6474f (patch) | |
| tree | b0f631ea5f306afb9893d88fd8899788e5c0c5d4 /ui | |
| parent | 29e742f4b613cf5dab195107f5c32e04d735f303 (diff) | |
| download | jquery-ui-60ae201d2fa5732c5f80db69d1560f7cbde6474f.tar.gz jquery-ui-60ae201d2fa5732c5f80db69d1560f7cbde6474f.zip | |
Diffstat (limited to 'ui')
| -rw-r--r-- | ui/tests/draggable.html | 15 | ||||
| -rw-r--r-- | ui/tests/draggable.js | 246 |
2 files changed, 250 insertions, 11 deletions
diff --git a/ui/tests/draggable.html b/ui/tests/draggable.html index 6b2ab5d29..a99cec5bb 100644 --- a/ui/tests/draggable.html +++ b/ui/tests/draggable.html @@ -12,15 +12,26 @@ <script type="text/javascript" src="../../qunit/testrunner.js"></script>
<script type="text/javascript" src="draggable.js"></script>
+<script type="text/javascript" src="jquery.useraction.js"></script>
+
+<style>
+ #main {
+ position:absolute !important;
+ top: -1000px !important;
+ left: -1000px !important;
+ }
+</style>
+
</head>
<body>
- <h1 id="header">jQuery Test Suite</h1>
+ <h1 id="header">Draggable Test Suite</h1>
<h2 id="banner"></h2>
<h2 id="userAgent"></h2>
<div id="main" style="border: 1px solid black; padding: 10px; margin: 10px;">
- <div id='draggable1' style="background: green; width: 200px; height: 100px;">I'm a draggable.</div>
+ <div id='draggable1' style="background: green; width: 200px; height: 100px;">Static</div>
+ <div id='draggable2' style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span>Absolute</span></div>
</div>
<ol id="tests"></ol>
diff --git a/ui/tests/draggable.js b/ui/tests/draggable.js index f4b17b1ff..c2059a55e 100644 --- a/ui/tests/draggable.js +++ b/ui/tests/draggable.js @@ -1,19 +1,247 @@ -$.fn.triggerKeydown = function(keyCode) {
- return this.trigger("keydown", [$.event.fix({event:"keydown", keyCode: keyCode, target: this[0]})]);
+var drag = function(el, dx, dy, complete) {
+
+ // speed = sync -> Drag syncrhonously.
+ // speed = fast|slow -> Drag asyncrhonously - animated.
+
+ return $(el).userAction("drag", {
+ dx: dx||0, dy: dy||0, speed: 'sync', complete: complete
+ });
};
+
+module("Draggable");
+
+test("create and destroy", function() {
+
+ expect(2);
-$(document).ready(function() {
+ $("#draggable1").draggable();
+ ok($("#draggable1").data("draggable"), "Accessing draggable instance after creation");
+
+ $("#draggable1").draggable("destroy");
+ ok(!$("#draggable1").data("draggable"), "Accessing draggable instance after destroy");
+
+});
+
+test("No options, relative", function() {
+
+ expect(4);
$("#draggable1").draggable();
- module("draggable: simple drag & drop");
+ var offset = $("#draggable1").data("draggable").element.offset();
+ equals(offset.left, -979, "Checking initial left position");
+ equals(offset.top, -979, "Checking initial top position");
+
+ drag("#draggable1", 50, 50);
+
+ var offset = $("#draggable1").data("draggable").element.offset();
+ equals(offset.left, -929, "Checking new left position");
+ equals(offset.top, -929, "Checking new top position");
+
+
+});
+
+test("No options, absolute", function() {
+
+ expect(4);
+
+ $("#draggable2").draggable();
+
+ var offset = $("#draggable2").data("draggable").element.offset();
+ equals(offset.left, -979, "Checking initial left position");
+ equals(offset.top, -979, "Checking initial top position");
+
+ drag("#draggable2", 50, 50);
+
+ var offset = $("#draggable2").data("draggable").element.offset();
+ equals(offset.left, -929, "Checking new left position");
+ equals(offset.top, -929, "Checking new top position");
+
+
+});
+
+test("{ helper: 'clone' }", function() {
+
+ expect(4);
+
+ $("#draggable1, #draggable2").draggable({ helper: "clone" });
+
+ drag("#draggable1, #draggable2", 50, 50);
+
+ var offset = $("#draggable1").data("draggable").element.offset();
+ equals(offset.left, -979, "Relative: Original position should be untouched");
+ equals(offset.top, -979, "Relative: Original position should be untouched");
+
+ var offset = $("#draggable2").data("draggable").element.offset();
+ equals(offset.left, -979, "Absolute: Original position should be untouched");
+ equals(offset.top, -979, "Absolute: Original position should be untouched");
+
+
+});
+
+test("{ grid: [50,50] }", function() {
+
+ expect(4);
+
+ $("#draggable1, #draggable2").draggable({ grid: [50,50] });
+
+ drag("#draggable1, #draggable2", 30, 30);
+
+ var offset = $("#draggable1").data("draggable").element.offset();
+ equals(offset.left, -929, "Relative: 50px move in grid");
+ equals(offset.top, -929, "Relative: 50px move in grid");
+
+ var offset = $("#draggable2").data("draggable").element.offset();
+ equals(offset.left, -929, "Absolute: 50px move in grid");
+ equals(offset.top, -929, "Absolute: 50px move in grid");
+
+
+});
+
+test("{ axis: 'y' }", function() {
+
+ expect(4);
+
+ $("#draggable1, #draggable2").draggable({ axis: "y" });
+
+ drag("#draggable1, #draggable2", 50, 50);
+
+ var offset = $("#draggable1").data("draggable").element.offset();
+ equals(offset.left, -979, "Relative: 0px move");
+ equals(offset.top, -929, "Relative: 50px move");
+
+ var offset = $("#draggable2").data("draggable").element.offset();
+ equals(offset.left, -979, "Absolute: 0px move");
+ equals(offset.top, -929, "Absolute: 50px move");
+
+
+});
+
+test("{ axis: 'x' }", function() {
+
+ expect(4);
+
+ $("#draggable1, #draggable2").draggable({ axis: "x" });
+
+ drag("#draggable1, #draggable2", 50, 50);
+
+ var offset = $("#draggable1").data("draggable").element.offset();
+ equals(offset.left, -929, "Relative: 50px move");
+ equals(offset.top, -979, "Relative: 0px move");
+
+ var offset = $("#draggable2").data("draggable").element.offset();
+ equals(offset.left, -929, "Absolute: 50px move");
+ equals(offset.top, -979, "Absolute: 0px move");
+
+
+});
+
+test("{ cancel: 'span' }", function() {
+
+ expect(2);
+
+ $("#draggable2").draggable({ cancel: 'span' });
+
+ drag("#draggable2 span", 50, 50);
+
+ var offset = $("#draggable2").data("draggable").element.offset();
+ equals(offset.left, -979, "Trigger on span: 0px move");
+ equals(offset.top, -979, "Trigger on span: 0px move");
+
+
+});
+
+test("{ handle: 'span' }", function() {
+
+ expect(4);
+
+ $("#draggable2").draggable({ handle: 'span' });
+
+ drag("#draggable2 span", 50, 50);
+
+ var offset = $("#draggable2").data("draggable").element.offset();
+ equals(offset.left, -929, "Trigger on span: 50px move");
+ equals(offset.top, -929, "Trigger on span: 50px move");
+
+ drag("#draggable2", 50, 50);
+
+ var offset = $("#draggable2").data("draggable").element.offset();
+ equals(offset.left, -929, "Trigger on element: 0px move");
+ equals(offset.top, -929, "Trigger on element: 0px move");
+
+
+});
+
+test("{ containment: 'parent' }", function() {
+
+ expect(4);
+
+ $("#draggable2, #draggable1").draggable({ containment: 'parent' });
+
+ drag("#draggable2, #draggable1", -100, -100);
+
+ var offset = $("#draggable2").data("draggable").element.offset();
+ equals(offset.left, -989, "Absolute: 10px move (to parent's margin end)");
+ equals(offset.top, -989, "Absolute: 10px move (to parent's margin end)");
+
+ var offset = $("#draggable1").data("draggable").element.offset();
+ equals(offset.left, -989, "Relative: 10px move (to parent's margin end)");
+ equals(offset.top, -989, "Relative: 10px move (to parent's margin end)");
+
+
+});
+
+test("{ cursorAt: { left: -5, top: -5 } }", function() {
+
+ expect(4);
+
+ var position = null;
+ $("#draggable2").draggable({
+ cursorAt: { left: -5, top: -5 },
+ drag: function(e, ui) {
+ position = ui.absolutePosition;
+ }
+ });
+
+ drag("#draggable2", -1, -1);
+
+ equals(position.left, -875, "Absolute: -1px move");
+ equals(position.top, -925, "Absolute: -1px move");
+
+ var position = null;
+ $("#draggable1").draggable({
+ cursorAt: { left: -5, top: -5 },
+ drag: function(e, ui) {
+ position = ui.absolutePosition;
+ }
+ });
- test("simple drag", function() {
+ drag("#draggable1", -1, -1);
+
+ equals(position.left, -875, "Relative: -1px move");
+ equals(position.top, -925, "Relative: -1px move");
+
+});
+
+test("{ cursor: 'move' }", function() {
- expect(1);
- ok(true, "Drag and drop element on the same position");
-
+ expect(2);
+
+ var cursor = null;
+ $("#draggable2").draggable({
+ cursor: "move",
+ start: function(e, ui) {
+ cursor = $("body").css("cursor");
+ }
});
+
+ drag("#draggable2", -1, -1);
+
+ equals(cursor, "move", "start callback: cursor 'move'");
+ equals($("body").css("cursor"), "auto", "after drag: cursor restored");
+
+});
+
+
-});
\ No newline at end of file |