]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 29e742f)
(no commit message)
authorPaul Bakaus <paul.bakaus@googlemail.com>
Sun, 1 Jun 2008 13:24:37 +0000 (13:24 +0000)
committerPaul Bakaus <paul.bakaus@googlemail.com>
Sun, 1 Jun 2008 13:24:37 +0000 (13:24 +0000)
ui/tests/draggable.html patch | blob | history
ui/tests/draggable.js patch | blob | history

diff --git a/ui/tests/draggable.html b/ui/tests/draggable.html
index 6b2ab5d2999f4d074a64a6c30a7d81184a6a0991..a99cec5bb81151c980af1429d5eafbd4da7b3af7 100644 (file)
--- a/ui/tests/draggable.html
+++ b/ui/tests/draggable.html
@@ -12,15 +12,26 @@
 \r
 <script type="text/javascript" src="../../qunit/testrunner.js"></script>\r
 <script type="text/javascript" src="draggable.js"></script>\r
+<script type="text/javascript" src="jquery.useraction.js"></script>\r
+\r
+<style>\r
+       #main {\r
+               position:absolute !important;\r
+               top: -1000px !important;\r
+               left: -1000px !important;\r
+       }\r
+</style>\r
+\r
 </head>\r
 <body>\r
 \r
-       <h1 id="header">jQuery Test Suite</h1>\r
+       <h1 id="header">Draggable Test Suite</h1>\r
        <h2 id="banner"></h2>\r
        <h2 id="userAgent"></h2>\r
        \r
        <div id="main" style="border: 1px solid black; padding: 10px; margin: 10px;">\r
-               <div id='draggable1' style="background: green; width: 200px; height: 100px;">I'm a draggable.</div>\r
+               <div id='draggable1' style="background: green; width: 200px; height: 100px;">Static</div>\r
+               <div id='draggable2' style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span>Absolute</span></div>\r
        </div>\r
        \r
        <ol id="tests"></ol>\r
diff --git a/ui/tests/draggable.js b/ui/tests/draggable.js
index f4b17b1ff3ced506e65cb3f787297ba845e03553..c2059a55ec3188be9a4a43d1df99a693300ecb0f 100644 (file)
--- a/ui/tests/draggable.js
+++ b/ui/tests/draggable.js
@@ -1,19 +1,247 @@
-$.fn.triggerKeydown = function(keyCode) {\r
-       return this.trigger("keydown", [$.event.fix({event:"keydown", keyCode: keyCode, target: this[0]})]);\r
+var drag = function(el, dx, dy, complete) {\r
+       \r
+       // speed = sync -> Drag syncrhonously.\r
+       // speed = fast|slow -> Drag asyncrhonously - animated.\r
+       \r
+       return $(el).userAction("drag", {\r
+               dx: dx||0, dy: dy||0, speed: 'sync', complete: complete \r
+       });\r
 };\r
 \r
+       \r
+module("Draggable");\r
+\r
+test("create and destroy", function() {\r
+\r
+       expect(2);\r
 \r
-$(document).ready(function() {\r
+       $("#draggable1").draggable();\r
+       ok($("#draggable1").data("draggable"), "Accessing draggable instance after creation");\r
+       \r
+       $("#draggable1").draggable("destroy");\r
+       ok(!$("#draggable1").data("draggable"), "Accessing draggable instance after destroy");\r
+       \r
+});\r
+\r
+test("No options, relative", function() {\r
+\r
+       expect(4);\r
 \r
        $("#draggable1").draggable();\r
        \r
-       module("draggable: simple drag & drop");\r
+       var offset = $("#draggable1").data("draggable").element.offset();\r
+       equals(offset.left, -979, "Checking initial left position");\r
+       equals(offset.top, -979, "Checking initial top position");\r
+       \r
+       drag("#draggable1", 50, 50);\r
+\r
+       var offset = $("#draggable1").data("draggable").element.offset();       \r
+       equals(offset.left, -929, "Checking new left position");\r
+       equals(offset.top, -929, "Checking new top position");\r
+       \r
+       \r
+});\r
+\r
+test("No options, absolute", function() {\r
+\r
+       expect(4);\r
+\r
+       $("#draggable2").draggable();\r
+       \r
+       var offset = $("#draggable2").data("draggable").element.offset();\r
+       equals(offset.left, -979, "Checking initial left position");\r
+       equals(offset.top, -979, "Checking initial top position");\r
+       \r
+       drag("#draggable2", 50, 50);\r
+\r
+       var offset = $("#draggable2").data("draggable").element.offset();       \r
+       equals(offset.left, -929, "Checking new left position");\r
+       equals(offset.top, -929, "Checking new top position");\r
+       \r
+       \r
+});\r
+\r
+test("{ helper: 'clone' }", function() {\r
+\r
+       expect(4);\r
+\r
+       $("#draggable1, #draggable2").draggable({ helper: "clone" });\r
+       \r
+       drag("#draggable1, #draggable2", 50, 50);\r
+\r
+       var offset = $("#draggable1").data("draggable").element.offset();       \r
+       equals(offset.left, -979, "Relative: Original position should be untouched");\r
+       equals(offset.top, -979, "Relative: Original position should be untouched");\r
+\r
+       var offset = $("#draggable2").data("draggable").element.offset();       \r
+       equals(offset.left, -979, "Absolute: Original position should be untouched");\r
+       equals(offset.top, -979, "Absolute: Original position should be untouched");\r
+       \r
+       \r
+});\r
+\r
+test("{ grid: [50,50] }", function() {\r
+\r
+       expect(4);\r
+\r
+       $("#draggable1, #draggable2").draggable({ grid: [50,50] });\r
+       \r
+       drag("#draggable1, #draggable2", 30, 30);\r
+\r
+       var offset = $("#draggable1").data("draggable").element.offset();       \r
+       equals(offset.left, -929, "Relative: 50px move in grid");\r
+       equals(offset.top, -929, "Relative: 50px move in grid");\r
+\r
+       var offset = $("#draggable2").data("draggable").element.offset();       \r
+       equals(offset.left, -929, "Absolute: 50px move in grid");\r
+       equals(offset.top, -929, "Absolute: 50px move in grid");\r
+       \r
+       \r
+});\r
+\r
+test("{ axis: 'y' }", function() {\r
+\r
+       expect(4);\r
+\r
+       $("#draggable1, #draggable2").draggable({ axis: "y" });\r
+       \r
+       drag("#draggable1, #draggable2", 50, 50);\r
+\r
+       var offset = $("#draggable1").data("draggable").element.offset();       \r
+       equals(offset.left, -979, "Relative: 0px move");\r
+       equals(offset.top, -929, "Relative: 50px move");\r
+\r
+       var offset = $("#draggable2").data("draggable").element.offset();       \r
+       equals(offset.left, -979, "Absolute: 0px move");\r
+       equals(offset.top, -929, "Absolute: 50px move");\r
+       \r
+       \r
+});\r
+\r
+test("{ axis: 'x' }", function() {\r
+\r
+       expect(4);\r
+\r
+       $("#draggable1, #draggable2").draggable({ axis: "x" });\r
+       \r
+       drag("#draggable1, #draggable2", 50, 50);\r
+\r
+       var offset = $("#draggable1").data("draggable").element.offset();       \r
+       equals(offset.left, -929, "Relative: 50px move");\r
+       equals(offset.top, -979, "Relative: 0px move");\r
+\r
+       var offset = $("#draggable2").data("draggable").element.offset();       \r
+       equals(offset.left, -929, "Absolute: 50px move");\r
+       equals(offset.top, -979, "Absolute: 0px move");\r
+       \r
+       \r
+});\r
+\r
+test("{ cancel: 'span' }", function() {\r
+\r
+       expect(2);\r
+\r
+       $("#draggable2").draggable({ cancel: 'span' });\r
+       \r
+       drag("#draggable2 span", 50, 50);\r
+\r
+       var offset = $("#draggable2").data("draggable").element.offset();       \r
+       equals(offset.left, -979, "Trigger on span: 0px move");\r
+       equals(offset.top, -979, "Trigger on span: 0px move");\r
+       \r
+       \r
+});\r
+\r
+test("{ handle: 'span' }", function() {\r
+\r
+       expect(4);\r
+\r
+       $("#draggable2").draggable({ handle: 'span' });\r
+       \r
+       drag("#draggable2 span", 50, 50);\r
+\r
+       var offset = $("#draggable2").data("draggable").element.offset();       \r
+       equals(offset.left, -929, "Trigger on span: 50px move");\r
+       equals(offset.top, -929, "Trigger on span: 50px move");\r
+       \r
+       drag("#draggable2", 50, 50);\r
+       \r
+       var offset = $("#draggable2").data("draggable").element.offset();       \r
+       equals(offset.left, -929, "Trigger on element: 0px move");\r
+       equals(offset.top, -929, "Trigger on element: 0px move");\r
+       \r
+       \r
+});\r
+\r
+test("{ containment: 'parent' }", function() {\r
+\r
+       expect(4);\r
+\r
+       $("#draggable2, #draggable1").draggable({ containment: 'parent' });\r
+       \r
+       drag("#draggable2, #draggable1", -100, -100);\r
+\r
+       var offset = $("#draggable2").data("draggable").element.offset();       \r
+       equals(offset.left, -989, "Absolute: 10px move (to parent's margin end)");\r
+       equals(offset.top, -989, "Absolute: 10px move (to parent's margin end)");\r
+       \r
+       var offset = $("#draggable1").data("draggable").element.offset();       \r
+       equals(offset.left, -989, "Relative: 10px move (to parent's margin end)");\r
+       equals(offset.top, -989, "Relative: 10px move (to parent's margin end)");\r
+       \r
+       \r
+});\r
+\r
+test("{ cursorAt: { left: -5, top: -5 } }", function() {\r
+\r
+       expect(4);\r
+\r
+       var position = null;\r
+       $("#draggable2").draggable({\r
+               cursorAt: { left: -5, top: -5 },\r
+               drag: function(e, ui) {\r
+                       position = ui.absolutePosition;\r
+               }\r
+       });\r
+       \r
+       drag("#draggable2", -1, -1);\r
+\r
+       equals(position.left, -875, "Absolute: -1px move");\r
+       equals(position.top, -925, "Absolute: -1px move");\r
+       \r
+       var position = null;\r
+       $("#draggable1").draggable({\r
+               cursorAt: { left: -5, top: -5 },\r
+               drag: function(e, ui) {\r
+                       position = ui.absolutePosition;\r
+               }\r
+       });\r
        \r
-       test("simple drag", function() {\r
+       drag("#draggable1", -1, -1);\r
+\r
+       equals(position.left, -875, "Relative: -1px move");\r
+       equals(position.top, -925, "Relative: -1px move");\r
+\r
+});\r
+\r
+test("{ cursor: 'move' }", function() {\r
 \r
-               expect(1);\r
-               ok(true, "Drag and drop element on the same position");\r
-               \r
+       expect(2);\r
+\r
+       var cursor = null;\r
+       $("#draggable2").draggable({\r
+               cursor: "move",\r
+               start: function(e, ui) {\r
+                       cursor = $("body").css("cursor");\r
+               }\r
        });\r
+       \r
+       drag("#draggable2", -1, -1);\r
+\r
+       equals(cursor, "move", "start callback: cursor 'move'");\r
+       equals($("body").css("cursor"), "auto", "after drag: cursor restored");\r
+\r
+});\r
+\r
+\r
 \r
-});
\ No newline at end of file
The official jQuery user interface library: https://github.com/jquery/jquery-ui