Skip to content
Permalink
Browse files

No commit message

  • Loading branch information
Paul Bakaus
Paul Bakaus committed Jun 1, 2008
1 parent 29e742f commit 60ae201d2fa5732c5f80db69d1560f7cbde6474f
Showing with 250 additions and 11 deletions.
  1. +13 −2 ui/tests/draggable.html
  2. +237 −9 ui/tests/draggable.js
@@ -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>
@@ -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");

});



});

0 comments on commit 60ae201

Please sign in to comment.
You can’t perform that action at this time.