library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Dev: Standardized the draggable test suite. Fixed #8748 - Dev: Get draggable test suite to pass

Browse Source
This commit is contained in:
Mike Sherov 2012-10-30 19:12:17 -04:00 committed by Scott González
parent d693ce5324
commit f0daa220d6
11 changed files with 394 additions and 338 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
build/tasks/testswarm.js
View File

@ -13,18 +13,18 @@ var versions = {
"Autocomplete": "autocomplete/autocomplete.html", "Autocomplete": "autocomplete/autocomplete.html",
"Button": "button/button.html", "Button": "button/button.html",
"Core": "core/core.html", "Core": "core/core.html",
//"datepicker/datepicker.html", //"Datepicker": "datepicker/datepicker.html",
//"dialog/dialog.html", //"Dialog": "dialog/dialog.html",
//"draggable/draggable.html", "Draggable": "draggable/draggable.html",
//"droppable/droppable.html", //"Droppable": "droppable/droppable.html",
"Effects": "effects/effects.html", "Effects": "effects/effects.html",
"Menu": "menu/menu.html", "Menu": "menu/menu.html",
"Position": "position/position.html", "Position": "position/position.html",
"Progressbar": "progressbar/progressbar.html", "Progressbar": "progressbar/progressbar.html",
//"resizable/resizable.html", //"Resizable": "resizable/resizable.html",
//"selectable/selectable.html", //"Selectable": "selectable/selectable.html",
//"slider/slider.html", //"Slider": "slider/slider.html",
//"sortable/sortable.html", //"Sortable": "sortable/sortable.html",
"Spinner": "spinner/spinner.html", "Spinner": "spinner/spinner.html",
"Tabs": "tabs/tabs.html", "Tabs": "tabs/tabs.html",
"Tooltip": "tooltip/tooltip.html", "Tooltip": "tooltip/tooltip.html",

4
grunt.js
View File

@ -281,13 +281,13 @@ grunt.initConfig({
files: grunt.file.expandFiles( "tests/unit/**/*.html" ).filter(function( file ) { files: grunt.file.expandFiles( "tests/unit/**/*.html" ).filter(function( file ) {
// disabling everything that doesn't (quite) work with PhantomJS for now // disabling everything that doesn't (quite) work with PhantomJS for now
// TODO except for all|index|test, try to include more as we go // TODO except for all|index|test, try to include more as we go
return !( /(all|all-active|index|test|draggable|droppable|selectable|resizable|sortable|dialog|slider|datepicker|tabs|tooltip)\.html$/ ).test( file ); return !( /(all|all-active|index|test|droppable|selectable|resizable|sortable|dialog|slider|datepicker|tabs|tooltip)\.html$/ ).test( file );
}) })
}, },
lint: { lint: {
ui: grunt.file.expandFiles( "ui/*.js" ).filter(function( file ) { ui: grunt.file.expandFiles( "ui/*.js" ).filter(function( file ) {
// TODO remove items from this list once rewritten // TODO remove items from this list once rewritten
return !( /(mouse|datepicker|draggable|droppable|resizable|selectable|sortable)\.js$/ ).test( file ); return !( /(mouse|datepicker|droppable|resizable|selectable|sortable)\.js$/ ).test( file );
}), }),
grunt: [ "grunt.js", "build/**/*.js" ], grunt: [ "grunt.js", "build/**/*.js" ],
tests: "tests/unit/**/*.js" tests: "tests/unit/**/*.js"

2
tests/unit/all-active.html
View File

@ -22,7 +22,7 @@
"core/core.html", "core/core.html",
//"datepicker/datepicker.html", //"datepicker/datepicker.html",
//"dialog/dialog.html", //"dialog/dialog.html",
//"draggable/draggable.html", "draggable/draggable.html",
//"droppable/droppable.html", //"droppable/droppable.html",
"effects/effects.html", "effects/effects.html",
"menu/menu.html", "menu/menu.html",

2
tests/unit/all.html
View File

@ -22,7 +22,7 @@
"core/core.html", "core/core.html",
"datepicker/datepicker.html", "datepicker/datepicker.html",
"dialog/dialog.html", "dialog/dialog.html",
//"draggable/draggable.html", "draggable/draggable.html",
//"droppable/droppable.html", //"droppable/droppable.html",
"effects/effects.html", "effects/effects.html",
"menu/menu.html", "menu/menu.html",

3
tests/unit/draggable/draggable.html
View File

@ -38,11 +38,14 @@
<ol id="qunit-tests"></ol> <ol id="qunit-tests"></ol>
<div id="qunit-fixture"> <div id="qunit-fixture">
<div id="main"></div>
<div id="draggable1" style="background: green; width: 200px; height: 100px;">Relative</div> <div id="draggable1" style="background: green; width: 200px; height: 100px;">Relative</div>
<div id="draggable2" style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span>Absolute</span></div> <div id="draggable2" style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span>Absolute</span></div>
<div style='width: 1px; height: 1000px;'></div> <div style='width: 1px; height: 1000px;'></div>
<div style="position: absolute; width: 1px; height: 2000px;"></div> <div style="position: absolute; width: 1px; height: 2000px;"></div>
</div> </div>
</body> </body>
</html> </html>

1
tests/unit/draggable/draggable_common.js
View File

@ -6,6 +6,7 @@ TestHelpers.commonWidgetTests( "draggable", {
cancel: "input,textarea,button,select,option", cancel: "input,textarea,button,select,option",
connectToSortable: false, connectToSortable: false,
containment: false, containment: false,
create: null,
cursor: "auto", cursor: "auto",
cursorAt: false, cursorAt: false,
delay: 0, delay: 0,

84
tests/unit/draggable/draggable_core.js
View File

@ -2,32 +2,66 @@
* draggable_core.js * draggable_core.js
*/ */
var el, offsetBefore, offsetAfter, dragged; TestHelpers.draggable = {};
function drag(handle, dx, dy) { TestHelpers.draggable.drag = function(handle, dx, dy) {
offsetBefore = el.offset();
$(handle).simulate("drag", { $(handle).simulate("drag", {
dx: dx || 0, dx: dx || 0,
dy: dy || 0 dy: dy || 0
}); });
dragged = { dx: dx, dy: dy }; return el.offset();
offsetAfter = el.offset(); };
}
TestHelpers.draggable.testDrag = function(el, handle, dx, dy, expectedDX, expectedDY, msg) {
var offsetBefore = el.offset(),
offsetAfter = TestHelpers.draggable.drag(handle, dx, dy),
actual = { left: offsetAfter.left, top: offsetAfter.top },
expected = { left: offsetBefore.left + expectedDX, top: offsetBefore.top + expectedDY };
function moved(dx, dy, msg) {
msg = msg ? msg + "." : ""; msg = msg ? msg + "." : "";
var actual = { left: offsetAfter.left, top: offsetAfter.top }, deepEqual(actual, expected, 'dragged[' + dx + ', ' + dy + '] ' + msg);
expected = { left: offsetBefore.left + dx, top: offsetBefore.top + dy }; };
deepEqual(actual, expected, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ' + msg);
}
TestHelpers.restoreScroll = function( what ) { TestHelpers.draggable.shouldMove = function(el, why) {
TestHelpers.draggable.testDrag(el, el, 50, 50, 50, 50, why);
};
TestHelpers.draggable.shouldNotMove = function(el, why) {
TestHelpers.draggable.testDrag(el, el, 50, 50, 0, 0, why);
};
TestHelpers.draggable.testScroll = function(el, position ) {
var oldPosition = $("#main").css('position');
$("#main").css('position', position);
TestHelpers.draggable.shouldMove(el, position+' parent');
$("#main").css('position', oldPosition);
};
TestHelpers.draggable.restoreScroll = function( what ) {
if( what ) { if( what ) {
$(document).scrollTop(0); $(document).scrollLeft(0); $(document).scrollTop(0); $(document).scrollLeft(0);
} else { } else {
$("#main")[0].scrollTop = 0; $("#main")[0].scrollLeft = 0; $("#main").scrollTop(0); $("#main").scrollLeft(0);
} }
} };
TestHelpers.draggable.setScroll = function( what ) {
if(what) {
// todo: currently, the draggable interaction doesn't properly account for scrolled pages,
// uncomment the line below to make the tests fail that should when the page is scrolled
// $(document).scrollTop(100); $(document).scrollLeft(100);
} else {
$("#main").scrollTop(100); $("#main").scrollLeft(100);
}
};
TestHelpers.draggable.border = function(el, side) {
return parseInt(el.css('border-' + side + '-width'), 10);
};
TestHelpers.draggable.margin = function(el, side) {
return parseInt(el.css('margin-' + side), 10);
};
(function($) { (function($) {
@ -36,31 +70,35 @@ module("draggable");
test("element types", function() { test("element types", function() {
var typeNames = ('p,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,div,form' + var typeNames = ('p,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,div,form' +
',table,fieldset,address,ins,del,em,strong,q,cite,dfn,abbr' + ',table,fieldset,address,ins,del,em,strong,q,cite,dfn,abbr' +
',acronym,code,samp,kbd,var,img,object,hr' + ',acronym,code,samp,kbd,var,img,hr' +
',input,button,label,select,iframe').split(','); ',input,button,label,select,iframe').split(',');
expect( typeNames.length );
$.each(typeNames, function(i) { $.each(typeNames, function(i) {
var typeName = typeNames[i]; var offsetBefore, offsetAfter, typeName = typeNames[i];
el = $(document.createElement(typeName)).appendTo('body'); el = $(document.createElement(typeName)).appendTo('#main');
(typeName === 'table' && el.append("<tr><td>content</td></tr>")); (typeName === 'table' && el.append("<tr><td>content</td></tr>"));
el.draggable({ cancel: '' }); el.draggable({ cancel: '' });
drag(el, 50, 50); offsetBefore = el.offset();
moved(50, 50, "&lt;" + typeName + "&gt;"); offsetAfter =TestHelpers.draggable.drag(el, 50, 50);
//there are some rounding errors in FF and Chrome, so we can't say equal, we have to settle for close enough
ok(offsetAfter.left - offsetBefore.left - 50 < 1 && offsetAfter.top - offsetBefore.top - 50 < 1, 'dragged[50, 50] ' + "&lt;" + typeName + "&gt;");
el.draggable("destroy"); el.draggable("destroy");
el.remove(); el.remove();
}); });
}); });
test("No options, relative", function() { test("No options, relative", function() {
expect( 1 );
el = $("#draggable1").draggable(); el = $("#draggable1").draggable();
drag(el, 50, 50); TestHelpers.draggable.shouldMove(el);
moved(50, 50);
}); });
test("No options, absolute", function() { test("No options, absolute", function() {
expect( 1 );
el = $("#draggable2").draggable(); el = $("#draggable2").draggable();
drag(el, 50, 50); TestHelpers.draggable.shouldMove(el);
moved(50, 50);
}); });
})(jQuery); })(jQuery);

8
tests/unit/draggable/draggable_events.js
View File

@ -16,7 +16,7 @@ test("callbacks occurrence count", function() {
stop: function() { stop++; } stop: function() { stop++; }
}); });
drag(el, 10, 10); TestHelpers.draggable.drag(el, 10, 10);
equal(start, 1, "start callback should happen exactly once"); equal(start, 1, "start callback should happen exactly once");
equal(dragc, 3, "drag callback should happen exactly once per mousemove"); equal(dragc, 3, "drag callback should happen exactly once per mousemove");
@ -35,7 +35,7 @@ test("stopping the start callback", function() {
stop: function() { stop++; } stop: function() { stop++; }
}); });
drag(el, 10, 10); TestHelpers.draggable.drag(el, 10, 10);
equal(start, 1, "start callback should happen exactly once"); equal(start, 1, "start callback should happen exactly once");
equal(dragc, 0, "drag callback should not happen at all"); equal(dragc, 0, "drag callback should not happen at all");
@ -54,7 +54,7 @@ test("stopping the drag callback", function() {
stop: function() { stop++; } stop: function() { stop++; }
}); });
drag(el, 10, 10); TestHelpers.draggable.drag(el, 10, 10);
equal(start, 1, "start callback should happen exactly once"); equal(start, 1, "start callback should happen exactly once");
equal(dragc, 1, "drag callback should happen exactly once"); equal(dragc, 1, "drag callback should happen exactly once");
@ -71,7 +71,7 @@ test("stopping the stop callback", function() {
stop: function() { return false; } stop: function() { return false; }
}); });
drag(el, 10, 10); TestHelpers.draggable.drag(el, 10, 10);
ok($("#draggable2").data('draggable').helper, "the clone should not be deleted if the stop callback is stopped"); ok($("#draggable2").data('draggable').helper, "the clone should not be deleted if the stop callback is stopped");

39
tests/unit/draggable/draggable_methods.js
View File

@ -3,20 +3,10 @@
*/ */
(function($) { (function($) {
function shouldmove(why) {
drag(el, 50, 50);
moved(50, 50, why);
}
function shouldnotmove(why) {
drag(el, 50, 50);
moved(0, 0, why);
}
module("draggable: methods"); module("draggable: methods");
test("init", function() { test("init", function() {
expect(6); expect(5);
$("<div></div>").appendTo('body').draggable().remove(); $("<div></div>").appendTo('body').draggable().remove();
ok(true, '.draggable() called on element'); ok(true, '.draggable() called on element');
@ -27,9 +17,6 @@ test("init", function() {
$("<div></div>").draggable(); $("<div></div>").draggable();
ok(true, '.draggable() called on disconnected DOMElement'); ok(true, '.draggable() called on disconnected DOMElement');
$("<div></div>").draggable().draggable("foo");
ok(true, 'arbitrary method called after init');
$("<div></div>").draggable().draggable("option", "foo"); $("<div></div>").draggable().draggable("option", "foo");
ok(true, 'arbitrary option getter after init'); ok(true, 'arbitrary option getter after init');
@ -38,6 +25,7 @@ test("init", function() {
}); });
test("destroy", function() { test("destroy", function() {
expect(4);
$("<div></div>").appendTo('body').draggable().draggable("destroy").remove(); $("<div></div>").appendTo('body').draggable().draggable("destroy").remove();
ok(true, '.draggable("destroy") called on element'); ok(true, '.draggable("destroy") called on element');
@ -47,9 +35,6 @@ test("destroy", function() {
$("<div></div>").draggable().draggable("destroy"); $("<div></div>").draggable().draggable("destroy");
ok(true, '.draggable("destroy") called on disconnected DOMElement'); ok(true, '.draggable("destroy") called on disconnected DOMElement');
$("<div></div>").draggable().draggable("destroy").draggable("foo");
ok(true, 'arbitrary method called after destroy');
var expected = $('<div></div>').draggable(), var expected = $('<div></div>').draggable(),
actual = expected.draggable('destroy'); actual = expected.draggable('destroy');
equal(actual, expected, 'destroy is chainable'); equal(actual, expected, 'destroy is chainable');
@ -58,17 +43,19 @@ test("destroy", function() {
test("enable", function() { test("enable", function() {
expect(7); expect(7);
el = $("#draggable2").draggable({ disabled: true }); el = $("#draggable2").draggable({ disabled: true });
shouldnotmove('.draggable({ disabled: true })'); TestHelpers.draggable.shouldNotMove(el, '.draggable({ disabled: true })');
el.draggable("enable"); el.draggable("enable");
shouldmove('.draggable("enable")'); TestHelpers.draggable.shouldMove(el, '.draggable("enable")');
equal(el.draggable("option", "disabled"), false, "disabled option getter"); equal(el.draggable("option", "disabled"), false, "disabled option getter");
el.draggable("destroy"); el.draggable("destroy");
el.draggable({ disabled: true }); el.draggable({ disabled: true });
shouldnotmove('.draggable({ disabled: true })'); TestHelpers.draggable.shouldNotMove(el, '.draggable({ disabled: true })');
el.draggable("option", "disabled", false); el.draggable("option", "disabled", false);
equal(el.draggable("option", "disabled"), false, "disabled option setter"); equal(el.draggable("option", "disabled"), false, "disabled option setter");
shouldmove('.draggable("option", "disabled", false)'); TestHelpers.draggable.shouldMove(el, '.draggable("option", "disabled", false)');
var expected = $('<div></div>').draggable(), var expected = $('<div></div>').draggable(),
actual = expected.draggable('enable'); actual = expected.draggable('enable');
@ -78,18 +65,20 @@ test("enable", function() {
test("disable", function() { test("disable", function() {
expect(7); expect(7);
el = $("#draggable2").draggable({ disabled: false }); el = $("#draggable2").draggable({ disabled: false });
shouldmove('.draggable({ disabled: false })'); TestHelpers.draggable.shouldMove(el, '.draggable({ disabled: false })');
el.draggable("disable"); el.draggable("disable");
shouldnotmove('.draggable("disable")'); TestHelpers.draggable.shouldNotMove(el, '.draggable("disable")');
equal(el.draggable("option", "disabled"), true, "disabled option getter"); equal(el.draggable("option", "disabled"), true, "disabled option getter");
el.draggable("destroy"); el.draggable("destroy");
el.draggable({ disabled: false }); el.draggable({ disabled: false });
shouldmove('.draggable({ disabled: false })'); TestHelpers.draggable.shouldMove(el, '.draggable({ disabled: false })');
el.draggable("option", "disabled", true); el.draggable("option", "disabled", true);
equal(el.draggable("option", "disabled"), true, "disabled option setter"); equal(el.draggable("option", "disabled"), true, "disabled option setter");
shouldnotmove('.draggable("option", "disabled", true)'); TestHelpers.draggable.shouldNotMove(el, '.draggable("option", "disabled", true)');
var expected = $('<div></div>').draggable(), var expected = $('<div></div>').draggable(),
actual = expected.draggable('disable'); actual = expected.draggable('disable');

534
tests/unit/draggable/draggable_options.js
View File

@ -3,30 +3,10 @@
*/ */
(function($) { (function($) {
function testScroll(position) {
$("#main").css('position', position);
drag(el, 50, 50);
moved(50, 50, position+' parent');
}
function setScroll(what) {
if(what) {
$(document).scrollTop(100); $(document).scrollLeft(100);
} else {
$("#main")[0].scrollTop = 100; $("#main")[0].scrollLeft = 100;
}
}
function border(el, side) {
return parseInt(el.css('border-' + side + '-width'), 10);
}
function margin(el, side) {
return parseInt(el.css('margin-' + side), 10);
}
module("draggable: options"); module("draggable: options");
test("{ addClasses: true }, default", function() { test("{ addClasses: true }, default", function() {
expect( 1 );
el = $("<div></div>").draggable({ addClasses: true }); el = $("<div></div>").draggable({ addClasses: true });
ok(el.is(".ui-draggable"), "'ui-draggable' class added"); ok(el.is(".ui-draggable"), "'ui-draggable' class added");
@ -34,6 +14,7 @@ test("{ addClasses: true }, default", function() {
}); });
test("{ addClasses: false }", function() { test("{ addClasses: false }", function() {
expect( 1 );
el = $("<div></div>").draggable({ addClasses: false }); el = $("<div></div>").draggable({ addClasses: false });
ok(!el.is(".ui-draggable"), "'ui-draggable' class not added"); ok(!el.is(".ui-draggable"), "'ui-draggable' class not added");
@ -41,52 +22,49 @@ test("{ addClasses: false }", function() {
}); });
test("{ appendTo: 'parent' }, default", function() { test("{ appendTo: 'parent' }, default", function() {
expect( 2 );
el = $("#draggable2").draggable({ appendTo: 'parent' }); el = $("#draggable2").draggable({ appendTo: 'parent' });
drag(el, 50, 50); TestHelpers.draggable.shouldMove(el);
moved(50, 50);
el = $("#draggable1").draggable({ appendTo: 'parent' }); el = $("#draggable1").draggable({ appendTo: 'parent' });
drag(el, 50, 50); TestHelpers.draggable.shouldMove(el);
moved(50, 50);
}); });
test("{ appendTo: Element }", function() { test("{ appendTo: Element }", function() {
expect( 2 );
el = $("#draggable2").draggable({ appendTo: $("#draggable2").parent()[0] }); el = $("#draggable2").draggable({ appendTo: $("#draggable2").parent()[0] });
drag(el, 50, 50); TestHelpers.draggable.shouldMove(el);
moved(50, 50);
el = $("#draggable1").draggable({ appendTo: $("#draggable2").parent()[0] }); el = $("#draggable1").draggable({ appendTo: $("#draggable2").parent()[0] });
drag(el, 50, 50); TestHelpers.draggable.shouldMove(el);
moved(50, 50);
}); });
test("{ appendTo: Selector }", function() { test("{ appendTo: Selector }", function() {
expect( 2 );
el = $("#draggable2").draggable({ appendTo: "#main" }); el = $("#draggable2").draggable({ appendTo: "#main" });
drag(el, 50, 50); TestHelpers.draggable.shouldMove(el);
moved(50, 50);
el = $("#draggable1").draggable({ appendTo: "#main" }); el = $("#draggable1").draggable({ appendTo: "#main" });
drag(el, 50, 50); TestHelpers.draggable.shouldMove(el);
moved(50, 50);
}); });
test("{ axis: false }, default", function() { test("{ axis: false }, default", function() {
expect( 1 );
el = $("#draggable2").draggable({ axis: false }); el = $("#draggable2").draggable({ axis: false });
drag(el, 50, 50); TestHelpers.draggable.shouldMove(el);
moved(50, 50);
}); });
test("{ axis: 'x' }", function() { test("{ axis: 'x' }", function() {
expect( 1 );
el = $("#draggable2").draggable({ axis: "x" }); el = $("#draggable2").draggable({ axis: "x" });
drag(el, 50, 50); TestHelpers.draggable.testDrag(el, el, 50, 50, 50, 0);
moved(50, 0);
}); });
test("{ axis: 'y' }", function() { test("{ axis: 'y' }", function() {
expect( 1 );
el = $("#draggable2").draggable({ axis: "y" }); el = $("#draggable2").draggable({ axis: "y" });
drag(el, 50, 50); TestHelpers.draggable.testDrag(el, el, 50, 50, 0, 50);
moved(0, 50);
}); });
test("{ axis: ? }, unexpected", function() { test("{ axis: ? }, unexpected", function() {
@ -98,38 +76,41 @@ test("{ axis: ? }, unexpected", function() {
"undefined": undefined, "undefined": undefined,
"function() {}": function() {} "function() {}": function() {}
}; };
expect( 6 );
$.each(unexpected, function(key, val) { $.each(unexpected, function(key, val) {
el = $("#draggable2").draggable({ axis: val }); el = $("#draggable2").draggable({ axis: val });
drag(el, 50, 50); TestHelpers.draggable.testDrag(el, el, 50, 50, 50, 50, "axis: " + key);
moved(50, 50, "axis: " + key);
el.draggable("destroy"); el.draggable("destroy");
}); });
}); });
test("{ cancel: 'input,textarea,button,select,option' }, default", function() { test("{ cancel: 'input,textarea,button,select,option' }, default", function() {
expect( 2 );
$('<div id="draggable-option-cancel-default"><input type="text"></div>').appendTo('#main'); $('<div id="draggable-option-cancel-default"><input type="text"></div>').appendTo('#main');
el = $("#draggable-option-cancel-default").draggable({ cancel: "input,textarea,button,select,option" }); el = $("#draggable-option-cancel-default").draggable({ cancel: "input,textarea,button,select,option" });
drag("#draggable-option-cancel-default", 50, 50); TestHelpers.draggable.shouldMove(el);
moved(50, 50);
el.draggable("destroy");
el = $("#draggable-option-cancel-default").draggable({ cancel: "input,textarea,button,select,option" }); el = $("#draggable-option-cancel-default").draggable({ cancel: "input,textarea,button,select,option" });
drag("#draggable-option-cancel-default input", 50, 50); TestHelpers.draggable.testDrag(el, "#draggable-option-cancel-default input", 50, 50, 0, 0);
moved(0, 0);
el.draggable("destroy"); el.draggable("destroy");
}); });
test("{ cancel: 'span' }", function() { test("{ cancel: 'span' }", function() {
expect( 2 );
el = $("#draggable2").draggable(); el = $("#draggable2").draggable();
drag("#draggable2 span", 50, 50); TestHelpers.draggable.testDrag(el, "#draggable2 span", 50, 50, 50, 50);
moved(50, 50);
el.draggable("destroy"); el.draggable("destroy");
el = $("#draggable2").draggable({ cancel: 'span' }); el = $("#draggable2").draggable({ cancel: 'span' });
drag("#draggable2 span", 50, 50); TestHelpers.draggable.testDrag(el, "#draggable2 span", 50, 50, 0, 0);
moved(0, 0);
}); });
test("{ cancel: ? }, unexpected", function() { test("{ cancel: ? }, unexpected", function() {
@ -144,62 +125,83 @@ test("{ cancel: ? }, unexpected", function() {
"function() {return true;}": function() {return true;}, "function() {return true;}": function() {return true;},
"function() {return false;}": function() {return false;} "function() {return false;}": function() {return false;}
}; };
expect( 9 );
$.each(unexpected, function(key, val) { $.each(unexpected, function(key, val) {
el = $("#draggable2").draggable({ cancel: val }); el = $("#draggable2").draggable({ cancel: val });
drag(el, 50, 50); TestHelpers.draggable.shouldMove(el, "cancel: " + key);
var expected = [50, 50];
moved(expected[0], expected[1], "cancel: " + key);
el.draggable("destroy"); el.draggable("destroy");
}); });
}); });
/*
test("{ containment: false }, default", function() { test("{ containment: false }, default", function() {
expect( 1 );
ok(false, 'missing test - untested code is broken code'); ok(false, 'missing test - untested code is broken code');
}); });
test("{ containment: Element }", function() { test("{ containment: Element }", function() {
expect( 1 );
ok(false, 'missing test - untested code is broken code'); ok(false, 'missing test - untested code is broken code');
}); });
*/
test("{ containment: 'parent' }, relative", function() { test("{ containment: 'parent' }, relative", function() {
expect( 1 );
el = $("#draggable1").draggable({ containment: 'parent' }); el = $("#draggable1").draggable({ containment: 'parent' });
var p = el.parent(), var p = el.parent(),
po = p.offset(), po = p.offset(),
expected = { expected = {
left: po.left + border(p, 'left') + margin(el, 'left'), left: po.left + TestHelpers.draggable.border(p, 'left') + TestHelpers.draggable.margin(el, 'left'),
top: po.top + border(p, 'top') + margin(el, 'top') top: po.top + TestHelpers.draggable.border(p, 'top') + TestHelpers.draggable.margin(el, 'top')
}; },
drag(el, -100, -100); offsetAfter = TestHelpers.draggable.drag(el, -100, -100);
deepEqual(offsetAfter, expected, 'compare offset to parent'); deepEqual(offsetAfter, expected, 'compare offset to parent');
}); });
test("{ containment: 'parent' }, absolute", function() { test("{ containment: 'parent' }, absolute", function() {
expect( 1 );
el = $("#draggable2").draggable({ containment: 'parent' }); el = $("#draggable2").draggable({ containment: 'parent' });
var p = el.parent(), var p = el.parent(),
po = p.offset(), po = p.offset(),
expected = { expected = {
left: po.left + border(p, 'left') + margin(el, 'left'), left: po.left + TestHelpers.draggable.border(p, 'left') + TestHelpers.draggable.margin(el, 'left'),
top: po.top + border(p, 'top') + margin(el, 'top') top: po.top + TestHelpers.draggable.border(p, 'top') + TestHelpers.draggable.margin(el, 'top')
}; },
drag(el, -100, -100); offsetAfter = TestHelpers.draggable.drag(el, -100, -100);
deepEqual(offsetAfter, expected, 'compare offset to parent'); deepEqual(offsetAfter, expected, 'compare offset to parent');
}); });
/*
test("{ containment: 'document' }", function() { test("{ containment: 'document' }", function() {
expect( 1 );
ok(false, 'missing test - untested code is broken code'); ok(false, 'missing test - untested code is broken code');
}); });
test("{ containment: 'window' }", function() { test("{ containment: 'window' }", function() {
expect( 1 );
ok(false, 'missing test - untested code is broken code'); ok(false, 'missing test - untested code is broken code');
}); });
test("{ containment: Selector }", function() { test("{ containment: Selector }", function() {
expect( 1 );
ok(false, 'missing test - untested code is broken code'); ok(false, 'missing test - untested code is broken code');
}); });
test("{ containment: [x1, y1, x2, y2] }", function() { test("{ containment: [x1, y1, x2, y2] }", function() {
expect( 1 );
ok(false, 'missing test - untested code is broken code'); ok(false, 'missing test - untested code is broken code');
}); });
*/
test("{ cursor: 'auto' }, default", function() { test("{ cursor: 'auto' }, default", function() {
function getCursor() { return $("#draggable2").css("cursor"); } function getCursor() { return $("#draggable2").css("cursor"); }
@ -216,7 +218,7 @@ test("{ cursor: 'auto' }, default", function() {
}); });
before = getCursor(); before = getCursor();
drag("#draggable2", -1, -1); TestHelpers.draggable.drag("#draggable2", -1, -1);
after = getCursor(); after = getCursor();
equal(actual, expected, "start callback: cursor '" + expected + "'"); equal(actual, expected, "start callback: cursor '" + expected + "'");
@ -240,7 +242,7 @@ test("{ cursor: 'move' }", function() {
}); });
before = getCursor(); before = getCursor();
drag("#draggable2", -1, -1); TestHelpers.draggable.drag("#draggable2", -1, -1);
after = getCursor(); after = getCursor();
equal(actual, expected, "start callback: cursor '" + expected + "'"); equal(actual, expected, "start callback: cursor '" + expected + "'");
@ -248,9 +250,13 @@ test("{ cursor: 'move' }", function() {
}); });
/*
test("{ cursorAt: false}, default", function() { test("{ cursorAt: false}, default", function() {
expect( 1 );
ok(false, 'missing test - untested code is broken code'); ok(false, 'missing test - untested code is broken code');
}); });
*/
test("{ cursorAt: { left: -5, top: -5 } }", function() { test("{ cursorAt: { left: -5, top: -5 } }", function() {
expect(4); expect(4);
@ -260,22 +266,24 @@ test("{ cursorAt: { left: -5, top: -5 } }", function() {
cursorAtX = -5, cursorAtY = -5; cursorAtX = -5, cursorAtY = -5;
$.each(['relative', 'absolute'], function(i, position) { $.each(['relative', 'absolute'], function(i, position) {
var el = $('#draggable' + (i + 1)).draggable({ var before, pos, expected;
el = $('#draggable' + (i + 1)).draggable({
cursorAt: { left: cursorAtX, top: cursorAtY }, cursorAt: { left: cursorAtX, top: cursorAtY },
drag: function(event, ui) { drag: function(event, ui) {
equal(ui.offset.left, expected.left, position + ' left'); equal(ui.offset.left, expected.left, position + ' left');
equal(ui.offset.top, expected.top, position + ' top'); equal(ui.offset.top, expected.top, position + ' top');
} }
}), });
before = el.offset(),
pos = { before = el.offset();
clientX: before.left + offsetX, pos = {
clientY: before.top + offsetY clientX: before.left + offsetX,
}, clientY: before.top + offsetY
expected = { };
left: before.left + offsetX - cursorAtX + deltaX, expected = {
top: before.top + offsetY - cursorAtY + deltaY left: before.left + offsetX - cursorAtX + deltaX,
}; top: before.top + offsetY - cursorAtY + deltaY
};
el.simulate("mousedown", pos); el.simulate("mousedown", pos);
pos.clientX += deltaX; pos.clientX += deltaX;
@ -293,22 +301,23 @@ test("{ cursorAt: { right: 10, bottom: 20 } }", function() {
cursorAtX = 10, cursorAtY = 20; cursorAtX = 10, cursorAtY = 20;
$.each(['relative', 'absolute'], function(i, position) { $.each(['relative', 'absolute'], function(i, position) {
var el = $('#draggable' + (i + 1)).draggable({ var before, pos, expected;
cursorAt: { right: cursorAtX, bottom: cursorAtY }, el = $('#draggable' + (i + 1)).draggable({
drag: function(event, ui) { cursorAt: { right: cursorAtX, bottom: cursorAtY },
equal(ui.offset.left, expected.left, position + ' left'); drag: function(event, ui) {
equal(ui.offset.top, expected.top, position + ' top'); equal(ui.offset.left, expected.left, position + ' left');
} equal(ui.offset.top, expected.top, position + ' top');
}), }
before = el.offset(), });
pos = { before = el.offset();
clientX: before.left + offsetX, pos = {
clientY: before.top + offsetY clientX: before.left + offsetX,
}, clientY: before.top + offsetY
expected = { };
left: before.left + offsetX - el.width() + cursorAtX + deltaX, expected = {
top: before.top + offsetY - el.height() + cursorAtY + deltaY left: before.left + offsetX - el.width() + cursorAtX + deltaX,
}; top: before.top + offsetY - el.height() + cursorAtY + deltaY
};
el.simulate("mousedown", pos); el.simulate("mousedown", pos);
pos.clientX += deltaX; pos.clientX += deltaX;
@ -326,22 +335,23 @@ test("{ cursorAt: [10, 20] }", function() {
cursorAtX = 10, cursorAtY = 20; cursorAtX = 10, cursorAtY = 20;
$.each(['relative', 'absolute'], function(i, position) { $.each(['relative', 'absolute'], function(i, position) {
var el = $('#draggable' + (i + 1)).draggable({ var before, pos, expected;
cursorAt: { left: cursorAtX, top: cursorAtY }, el = $('#draggable' + (i + 1)).draggable({
drag: function(event, ui) { cursorAt: { left: cursorAtX, top: cursorAtY },
equal(ui.offset.left, expected.left, position + ' left'); drag: function(event, ui) {
equal(ui.offset.top, expected.top, position + ' top'); equal(ui.offset.left, expected.left, position + ' left');
} equal(ui.offset.top, expected.top, position + ' top');
}), }
before = el.offset(), });
pos = { before = el.offset();
clientX: before.left + offsetX, pos = {
clientY: before.top + offsetY clientX: before.left + offsetX,
}, clientY: before.top + offsetY
expected = { };
left: before.left + offsetX - cursorAtX + deltaX, expected = {
top: before.top + offsetY - cursorAtY + deltaY left: before.left + offsetX - cursorAtX + deltaX,
}; top: before.top + offsetY - cursorAtY + deltaY
};
el.simulate("mousedown", pos); el.simulate("mousedown", pos);
pos.clientX += deltaX; pos.clientX += deltaX;
@ -359,22 +369,23 @@ test("{ cursorAt: '20, 40' }", function() {
cursorAtX = 20, cursorAtY = 40; cursorAtX = 20, cursorAtY = 40;
$.each(['relative', 'absolute'], function(i, position) { $.each(['relative', 'absolute'], function(i, position) {
var el = $('#draggable' + (i + 1)).draggable({ var before, pos, expected;
cursorAt: { left: cursorAtX, top: cursorAtY }, el = $('#draggable' + (i + 1)).draggable({
drag: function(event, ui) { cursorAt: { left: cursorAtX, top: cursorAtY },
equal(ui.offset.left, expected.left, position + ' left'); drag: function(event, ui) {
equal(ui.offset.top, expected.top, position + ' top'); equal(ui.offset.left, expected.left, position + ' left');
} equal(ui.offset.top, expected.top, position + ' top');
}), }
before = el.offset(), });
pos = { before = el.offset();
clientX: before.left + offsetX, pos = {
clientY: before.top + offsetY clientX: before.left + offsetX,
}, clientY: before.top + offsetY
expected = { };
left: before.left + offsetX - cursorAtX + deltaX, expected = {
top: before.top + offsetY - cursorAtY + deltaY left: before.left + offsetX - cursorAtX + deltaX,
}; top: before.top + offsetY - cursorAtY + deltaY
};
el.simulate("mousedown", pos); el.simulate("mousedown", pos);
pos.clientX += deltaX; pos.clientX += deltaX;
@ -385,223 +396,240 @@ test("{ cursorAt: '20, 40' }", function() {
}); });
test("{ distance: 10 }", function() { test("{ distance: 10 }", function() {
expect( 3 );
el = $("#draggable2").draggable({ distance: 10 }); el = $("#draggable2").draggable({ distance: 10 });
drag(el, -9, -9); TestHelpers.draggable.testDrag(el, el, -9, -9, 0, 0, 'distance not met');
moved(0, 0, 'distance not met');
drag(el, -10, -10); TestHelpers.draggable.testDrag(el, el, -10, -10, -10, -10, 'distance met');
moved(-10, -10, 'distance met');
drag(el, 9, 9); TestHelpers.draggable.testDrag(el, el, 9, 9, 0, 0, 'distance not met');
moved(0, 0, 'distance not met');
}); });
test("{ grid: [50, 50] }, relative", function() { test("{ grid: [50, 50] }, relative", function() {
expect( 2 );
el = $("#draggable1").draggable({ grid: [50, 50] }); el = $("#draggable1").draggable({ grid: [50, 50] });
drag(el, 24, 24); TestHelpers.draggable.testDrag(el, el, 24, 24, 0, 0);
moved(0, 0); TestHelpers.draggable.testDrag(el, el, 26, 25, 50, 50);
drag(el, 26, 25);
moved(50, 50);
}); });
test("{ grid: [50, 50] }, absolute", function() { test("{ grid: [50, 50] }, absolute", function() {
expect( 2 );
el = $("#draggable2").draggable({ grid: [50, 50] }); el = $("#draggable2").draggable({ grid: [50, 50] });
drag(el, 24, 24); TestHelpers.draggable.testDrag(el, el, 24, 24, 0, 0);
moved(0, 0); TestHelpers.draggable.testDrag(el, el, 26, 25, 50, 50);
drag(el, 26, 25);
moved(50, 50);
}); });
test("{ handle: 'span' }", function() { test("{ handle: 'span' }", function() {
expect( 2 );
el = $("#draggable2").draggable({ handle: 'span' }); el = $("#draggable2").draggable({ handle: 'span' });
drag("#draggable2 span", 50, 50); TestHelpers.draggable.testDrag(el, "#draggable2 span", 50, 50, 50, 50, "drag span");
moved(50, 50, "drag span"); TestHelpers.draggable.shouldNotMove(el, "drag element");
drag("#draggable2", 50, 50);
moved(0, 0, "drag element");
}); });
test("{ helper: 'clone' }, relative", function() { test("{ helper: 'clone' }, relative", function() {
expect( 1 );
el = $("#draggable1").draggable({ helper: "clone" }); el = $("#draggable1").draggable({ helper: "clone" });
drag(el, 50, 50); TestHelpers.draggable.shouldNotMove(el);
moved(0, 0);
}); });
test("{ helper: 'clone' }, absolute", function() { test("{ helper: 'clone' }, absolute", function() {
expect( 1 );
el = $("#draggable2").draggable({ helper: "clone" }); el = $("#draggable2").draggable({ helper: "clone" });
drag(el, 50, 50); TestHelpers.draggable.shouldNotMove(el);
moved(0, 0);
}); });
test("{ helper: 'original' }, relative, with scroll offset on parent", function() { test("{ helper: 'original' }, relative, with scroll offset on parent", function() {
expect( 3 );
el = $("#draggable1").draggable({ helper: "original" }); el = $("#draggable1").draggable({ helper: "original" });
setScroll(); TestHelpers.draggable.setScroll();
testScroll('relative'); TestHelpers.draggable.testScroll(el, 'relative');
setScroll(); TestHelpers.draggable.setScroll();
testScroll('static'); TestHelpers.draggable.testScroll(el, 'static');
setScroll(); TestHelpers.draggable.setScroll();
testScroll('absolute'); TestHelpers.draggable.testScroll(el, 'absolute');
TestHelpers.restoreScroll(); TestHelpers.draggable.restoreScroll();
}); });
test("{ helper: 'original' }, relative, with scroll offset on root", function() { test("{ helper: 'original' }, relative, with scroll offset on root", function() {
expect( 3 );
el = $("#draggable1").draggable({ helper: "original" }); el = $("#draggable1").draggable({ helper: "original" });
setScroll('root'); TestHelpers.draggable.setScroll('root');
testScroll('relative'); TestHelpers.draggable.testScroll(el, 'relative');
setScroll('root'); TestHelpers.draggable.setScroll('root');
testScroll('static'); TestHelpers.draggable.testScroll(el, 'static');
setScroll('root'); TestHelpers.draggable.setScroll('root');
testScroll('absolute'); TestHelpers.draggable.testScroll(el, 'absolute');
TestHelpers.restoreScroll('root'); TestHelpers.draggable.restoreScroll('root');
}); });
test("{ helper: 'original' }, relative, with scroll offset on root and parent", function() { test("{ helper: 'original' }, relative, with scroll offset on root and parent", function() {
expect(3);
el = $("#draggable1").draggable({ helper: "original" }); el = $("#draggable1").draggable({ helper: "original" });
setScroll(); TestHelpers.draggable.setScroll();
setScroll('root'); TestHelpers.draggable.setScroll('root');
testScroll('relative'); TestHelpers.draggable.testScroll(el, 'relative');
setScroll(); TestHelpers.draggable.setScroll();
setScroll('root'); TestHelpers.draggable.setScroll('root');
testScroll('static'); TestHelpers.draggable.testScroll(el, 'static');
setScroll(); TestHelpers.draggable.setScroll();
setScroll('root'); TestHelpers.draggable.setScroll('root');
testScroll('absolute'); TestHelpers.draggable.testScroll(el, 'absolute');
TestHelpers.restoreScroll(); TestHelpers.draggable.restoreScroll();
TestHelpers.restoreScroll('root'); TestHelpers.draggable.restoreScroll('root');
}); });
test("{ helper: 'original' }, absolute, with scroll offset on parent", function() { test("{ helper: 'original' }, absolute, with scroll offset on parent", function() {
expect(3);
el = $("#draggable1").css({ position: 'absolute', top: 0, left: 0 }).draggable({ helper: "original" }); el = $("#draggable1").css({ position: 'absolute', top: 0, left: 0 }).draggable({ helper: "original" });
setScroll(); TestHelpers.draggable.setScroll();
testScroll('relative'); TestHelpers.draggable.testScroll(el, 'relative');
setScroll(); TestHelpers.draggable.setScroll();
testScroll('static'); TestHelpers.draggable.testScroll(el, 'static');
setScroll(); TestHelpers.draggable.setScroll();
testScroll('absolute'); TestHelpers.draggable.testScroll(el, 'absolute');
TestHelpers.restoreScroll(); TestHelpers.draggable.restoreScroll();
}); });
test("{ helper: 'original' }, absolute, with scroll offset on root", function() { test("{ helper: 'original' }, absolute, with scroll offset on root", function() {
expect(3);
el = $("#draggable1").css({ position: 'absolute', top: 0, left: 0 }).draggable({ helper: "original" }); el = $("#draggable1").css({ position: 'absolute', top: 0, left: 0 }).draggable({ helper: "original" });
setScroll('root'); TestHelpers.draggable.setScroll('root');
testScroll('relative'); TestHelpers.draggable.testScroll(el, 'relative');
setScroll('root'); TestHelpers.draggable.setScroll('root');
testScroll('static'); TestHelpers.draggable.testScroll(el, 'static');
setScroll('root'); TestHelpers.draggable.setScroll('root');
testScroll('absolute'); TestHelpers.draggable.testScroll(el, 'absolute');
TestHelpers.restoreScroll('root'); TestHelpers.draggable.restoreScroll('root');
}); });
test("{ helper: 'original' }, absolute, with scroll offset on root and parent", function() { test("{ helper: 'original' }, absolute, with scroll offset on root and parent", function() {
expect(3);
el = $("#draggable1").css({ position: 'absolute', top: 0, left: 0 }).draggable({ helper: "original" }); el = $("#draggable1").css({ position: 'absolute', top: 0, left: 0 }).draggable({ helper: "original" });
setScroll(); TestHelpers.draggable.setScroll();
setScroll('root'); TestHelpers.draggable.setScroll('root');
testScroll('relative'); TestHelpers.draggable.testScroll(el, 'relative');
setScroll(); TestHelpers.draggable.setScroll();
setScroll('root'); TestHelpers.draggable.setScroll('root');
testScroll('static'); TestHelpers.draggable.testScroll(el, 'static');
setScroll(); TestHelpers.draggable.setScroll();
setScroll('root'); TestHelpers.draggable.setScroll('root');
testScroll('absolute'); TestHelpers.draggable.testScroll(el, 'absolute');
TestHelpers.restoreScroll(); TestHelpers.draggable.restoreScroll();
TestHelpers.restoreScroll('root'); TestHelpers.draggable.restoreScroll('root');
}); });
test("{ helper: 'original' }, fixed, with scroll offset on parent", function() { test("{ helper: 'original' }, fixed, with scroll offset on parent", function() {
expect(3);
el = $("#draggable1").css({ position: 'fixed', top: 0, left: 0 }).draggable({ helper: "original" }); el = $("#draggable1").css({ position: 'fixed', top: 0, left: 0 }).draggable({ helper: "original" });
setScroll(); TestHelpers.draggable.setScroll();
testScroll('relative'); TestHelpers.draggable.testScroll(el, 'relative');
setScroll(); TestHelpers.draggable.setScroll();
testScroll('static'); TestHelpers.draggable.testScroll(el, 'static');
setScroll(); TestHelpers.draggable.setScroll();
testScroll('absolute'); TestHelpers.draggable.testScroll(el, 'absolute');
TestHelpers.restoreScroll(); TestHelpers.draggable.restoreScroll();
}); });
test("{ helper: 'original' }, fixed, with scroll offset on root", function() { test("{ helper: 'original' }, fixed, with scroll offset on root", function() {
expect(3);
el = $("#draggable1").css({ position: 'fixed', top: 0, left: 0 }).draggable({ helper: "original" }); el = $("#draggable1").css({ position: 'fixed', top: 0, left: 0 }).draggable({ helper: "original" });
setScroll('root'); TestHelpers.draggable.setScroll('root');
testScroll('relative'); TestHelpers.draggable.testScroll(el, 'relative');
setScroll('root'); TestHelpers.draggable.setScroll('root');
testScroll('static'); TestHelpers.draggable.testScroll(el, 'static');
setScroll('root'); TestHelpers.draggable.setScroll('root');
testScroll('absolute'); TestHelpers.draggable.testScroll(el, 'absolute');
TestHelpers.restoreScroll('root'); TestHelpers.draggable.restoreScroll('root');
}); });
test("{ helper: 'original' }, fixed, with scroll offset on root and parent", function() { test("{ helper: 'original' }, fixed, with scroll offset on root and parent", function() {
expect(3);
el = $("#draggable1").css({ position: 'fixed', top: 0, left: 0 }).draggable({ helper: "original" }); el = $("#draggable1").css({ position: 'fixed', top: 0, left: 0 }).draggable({ helper: "original" });
setScroll(); TestHelpers.draggable.setScroll();
setScroll('root'); TestHelpers.draggable.setScroll('root');
testScroll('relative'); TestHelpers.draggable.testScroll(el, 'relative');
setScroll(); TestHelpers.draggable.setScroll();
setScroll('root'); TestHelpers.draggable.setScroll('root');
testScroll('static'); TestHelpers.draggable.testScroll(el, 'static');
setScroll(); TestHelpers.draggable.setScroll();
setScroll('root'); TestHelpers.draggable.setScroll('root');
testScroll('absolute'); TestHelpers.draggable.testScroll(el, 'absolute');
TestHelpers.restoreScroll(); TestHelpers.draggable.restoreScroll();
TestHelpers.restoreScroll('root'); TestHelpers.draggable.restoreScroll('root');
}); });
test("{ helper: 'clone' }, absolute", function() { test("{ helper: 'clone' }, absolute", function() {
expect(1);
var helperOffset = null, var helperOffset = null,
origOffset = $("#draggable1").offset(); origOffset = $("#draggable1").offset();
@ -609,14 +637,16 @@ test("{ helper: 'clone' }, absolute", function() {
helperOffset = ui.helper.offset(); helperOffset = ui.helper.offset();
} }); } });
drag(el, 1, 1); TestHelpers.draggable.drag(el, 1, 1);
deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] '); deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[1, 1] ');
}); });
test("{ helper: 'clone' }, absolute with scroll offset on parent", function() { test("{ helper: 'clone' }, absolute with scroll offset on parent", function() {
setScroll(); expect(3);
TestHelpers.draggable.setScroll();
var helperOffset = null, var helperOffset = null,
origOffset = null; origOffset = null;
@ -626,26 +656,28 @@ test("{ helper: 'clone' }, absolute with scroll offset on parent", function() {
$("#main").css('position', 'relative'); $("#main").css('position', 'relative');
origOffset = $("#draggable1").offset(); origOffset = $("#draggable1").offset();
drag(el, 1, 1); TestHelpers.draggable.drag(el, 1, 1);
deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] '); deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[1, 1] ');
$("#main").css('position', 'static'); $("#main").css('position', 'static');
origOffset = $("#draggable1").offset(); origOffset = $("#draggable1").offset();
drag(el, 1, 1); TestHelpers.draggable.drag(el, 1, 1);
deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] '); deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[1, 1] ');
$("#main").css('position', 'absolute'); $("#main").css('position', 'absolute');
origOffset = $("#draggable1").offset(); origOffset = $("#draggable1").offset();
drag(el, 1, 1); TestHelpers.draggable.drag(el, 1, 1);
deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] '); deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[1, 1] ');
TestHelpers.restoreScroll(); TestHelpers.draggable.restoreScroll();
}); });
test("{ helper: 'clone' }, absolute with scroll offset on root", function() { test("{ helper: 'clone' }, absolute with scroll offset on root", function() {
setScroll('root'); expect(3);
TestHelpers.draggable.setScroll('root');
var helperOffset = null, var helperOffset = null,
origOffset = null; origOffset = null;
@ -655,27 +687,29 @@ test("{ helper: 'clone' }, absolute with scroll offset on root", function() {
$("#main").css('position', 'relative'); $("#main").css('position', 'relative');
origOffset = $("#draggable1").offset(); origOffset = $("#draggable1").offset();
drag(el, 1, 1); TestHelpers.draggable.drag(el, 1, 1);
deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] '); deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[1, 1] ');
$("#main").css('position', 'static'); $("#main").css('position', 'static');
origOffset = $("#draggable1").offset(); origOffset = $("#draggable1").offset();
drag(el, 1, 1); TestHelpers.draggable.drag(el, 1, 1);
deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] '); deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[1, 1] ');
$("#main").css('position', 'absolute'); $("#main").css('position', 'absolute');
origOffset = $("#draggable1").offset(); origOffset = $("#draggable1").offset();
drag(el, 1, 1); TestHelpers.draggable.drag(el, 1, 1);
deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] '); deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[1, 1] ');
TestHelpers.restoreScroll('root'); TestHelpers.draggable.restoreScroll('root');
}); });
test("{ helper: 'clone' }, absolute with scroll offset on root and parent", function() { test("{ helper: 'clone' }, absolute with scroll offset on root and parent", function() {
setScroll('root'); expect(3);
setScroll();
TestHelpers.draggable.setScroll('root');
TestHelpers.draggable.setScroll();
var helperOffset = null, var helperOffset = null,
origOffset = null; origOffset = null;
@ -685,21 +719,21 @@ test("{ helper: 'clone' }, absolute with scroll offset on root and parent", func
$("#main").css('position', 'relative'); $("#main").css('position', 'relative');
origOffset = $("#draggable1").offset(); origOffset = $("#draggable1").offset();
drag(el, 1, 1); TestHelpers.draggable.drag(el, 1, 1);
deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] '); deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[1, 1] ');
$("#main").css('position', 'static'); $("#main").css('position', 'static');
origOffset = $("#draggable1").offset(); origOffset = $("#draggable1").offset();
drag(el, 1, 1); TestHelpers.draggable.drag(el, 1, 1);
deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] '); deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[1, 1] ');
$("#main").css('position', 'absolute'); $("#main").css('position', 'absolute');
origOffset = $("#draggable1").offset(); origOffset = $("#draggable1").offset();
drag(el, 1, 1); TestHelpers.draggable.drag(el, 1, 1);
deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] '); deepEqual({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[1, 1] ');
TestHelpers.restoreScroll('root'); TestHelpers.draggable.restoreScroll('root');
TestHelpers.restoreScroll(); TestHelpers.draggable.restoreScroll();
}); });
@ -715,7 +749,7 @@ test("{ opacity: 0.5 }", function() {
} }
}); });
drag("#draggable2", -1, -1); TestHelpers.draggable.drag("#draggable2", -1, -1);
equal(opacity, 0.5, "start callback: opacity is"); equal(opacity, 0.5, "start callback: opacity is");
@ -735,7 +769,7 @@ test("{ zIndex: 10 }", function() {
} }
}); });
drag("#draggable2", -1, -1); TestHelpers.draggable.drag("#draggable2", -1, -1);
equal(actual, expected, "start callback: zIndex is"); equal(actual, expected, "start callback: zIndex is");

39
ui/jquery.ui.draggable.js vendored
View File

@ -15,6 +15,7 @@
*/ */
(function( $, undefined ) { (function( $, undefined ) {
/*jshint onevar: false, curly: false, eqeqeq: false, laxbreak: true, shadow: true, funcscope: true */
$.widget("ui.draggable", $.ui.mouse, { $.widget("ui.draggable", $.ui.mouse, {
version: "@VERSION", version: "@VERSION",
widgetEventPrefix: "drag", widgetEventPrefix: "drag",
@ -372,7 +373,6 @@ $.widget("ui.draggable", $.ui.mouse, {
if(!(/^(document|window|parent)$/).test(o.containment) && o.containment.constructor != Array) { if(!(/^(document|window|parent)$/).test(o.containment) && o.containment.constructor != Array) {
var c = $(o.containment); var c = $(o.containment);
var ce = c[0]; if(!ce) return; var ce = c[0]; if(!ce) return;
var co = c.offset();
var over = ($(ce).css("overflow") != 'hidden'); var over = ($(ce).css("overflow") != 'hidden');
this.containment = [ this.containment = [
@ -393,7 +393,7 @@ $.widget("ui.draggable", $.ui.mouse, {
if(!pos) pos = this.position; if(!pos) pos = this.position;
var mod = d == "absolute" ? 1 : -1; var mod = d == "absolute" ? 1 : -1;
var o = this.options, scroll = this.cssPosition == 'absolute' && !(this.scrollParent[0] != document && $.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName); var scroll = this.cssPosition == 'absolute' && !(this.scrollParent[0] != document && $.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);
return { return {
top: ( top: (
@ -446,10 +446,10 @@ $.widget("ui.draggable", $.ui.mouse, {
if(o.grid) { if(o.grid) {
//Check for grid elements set to 0 to prevent divide by 0 error causing invalid argument errors in IE (see ticket #6950) //Check for grid elements set to 0 to prevent divide by 0 error causing invalid argument errors in IE (see ticket #6950)
var top = o.grid[1] ? this.originalPageY + Math.round((pageY - this.originalPageY) / o.grid[1]) * o.grid[1] : this.originalPageY; var top = o.grid[1] ? this.originalPageY + Math.round((pageY - this.originalPageY) / o.grid[1]) * o.grid[1] : this.originalPageY;
pageY = containment ? (!(top - this.offset.click.top < containment[1] || top - this.offset.click.top > containment[3]) ? top : (!(top - this.offset.click.top < containment[1]) ? top - o.grid[1] : top + o.grid[1])) : top; pageY = containment ? ((top - this.offset.click.top >= containment[1] || top - this.offset.click.top > containment[3]) ? top : ((top - this.offset.click.top >= containment[1]) ? top - o.grid[1] : top + o.grid[1])) : top;
var left = o.grid[0] ? this.originalPageX + Math.round((pageX - this.originalPageX) / o.grid[0]) * o.grid[0] : this.originalPageX; var left = o.grid[0] ? this.originalPageX + Math.round((pageX - this.originalPageX) / o.grid[0]) * o.grid[0] : this.originalPageX;
pageX = containment ? (!(left - this.offset.click.left < containment[0] || left - this.offset.click.left > containment[2]) ? left : (!(left - this.offset.click.left < containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left; pageX = containment ? ((left - this.offset.click.left >= containment[0] || left - this.offset.click.left > containment[2]) ? left : ((left - this.offset.click.left >= containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left;
} }
} }
@ -492,7 +492,7 @@ $.widget("ui.draggable", $.ui.mouse, {
plugins: {}, plugins: {},
_uiHash: function(event) { _uiHash: function() {
return { return {
helper: this.helper, helper: this.helper,
position: this.position, position: this.position,
@ -560,16 +560,7 @@ $.ui.plugin.add("draggable", "connectToSortable", {
var inst = $(this).data("draggable"), that = this; var inst = $(this).data("draggable"), that = this;
var checkPos = function(o) { $.each(inst.sortables, function() {
var dyClick = this.offset.click.top, dxClick = this.offset.click.left;
var helperTop = this.positionAbs.top, helperLeft = this.positionAbs.left;
var itemHeight = o.height, itemWidth = o.width;
var itemTop = o.top, itemLeft = o.left;
return $.ui.isOver(helperTop + dyClick, helperLeft + dxClick, itemTop, itemLeft, itemHeight, itemWidth);
};
$.each(inst.sortables, function(i) {
var innermostIntersecting = false; var innermostIntersecting = false;
var thisSortable = this; var thisSortable = this;
@ -652,7 +643,7 @@ $.ui.plugin.add("draggable", "connectToSortable", {
inst.dropped = false; //draggable revert needs that inst.dropped = false; //draggable revert needs that
} }
}; }
}); });
@ -660,12 +651,12 @@ $.ui.plugin.add("draggable", "connectToSortable", {
}); });
$.ui.plugin.add("draggable", "cursor", { $.ui.plugin.add("draggable", "cursor", {
start: function(event, ui) { start: function() {
var t = $('body'), o = $(this).data('draggable').options; var t = $('body'), o = $(this).data('draggable').options;
if (t.css("cursor")) o._cursor = t.css("cursor"); if (t.css("cursor")) o._cursor = t.css("cursor");
t.css("cursor", o.cursor); t.css("cursor", o.cursor);
}, },
stop: function(event, ui) { stop: function() {
var o = $(this).data('draggable').options; var o = $(this).data('draggable').options;
if (o._cursor) $('body').css("cursor", o._cursor); if (o._cursor) $('body').css("cursor", o._cursor);
} }
@ -684,11 +675,11 @@ $.ui.plugin.add("draggable", "opacity", {
}); });
$.ui.plugin.add("draggable", "scroll", { $.ui.plugin.add("draggable", "scroll", {
start: function(event, ui) { start: function() {
var i = $(this).data("draggable"); var i = $(this).data("draggable");
if(i.scrollParent[0] != document && i.scrollParent[0].tagName != 'HTML') i.overflowOffset = i.scrollParent.offset(); if(i.scrollParent[0] != document && i.scrollParent[0].tagName != 'HTML') i.overflowOffset = i.scrollParent.offset();
}, },
drag: function(event, ui) { drag: function( event ) {
var i = $(this).data("draggable"), o = i.options, scrolled = false; var i = $(this).data("draggable"), o = i.options, scrolled = false;
@ -733,7 +724,7 @@ $.ui.plugin.add("draggable", "scroll", {
}); });
$.ui.plugin.add("draggable", "snap", { $.ui.plugin.add("draggable", "snap", {
start: function(event, ui) { start: function() {
var i = $(this).data("draggable"), o = i.options; var i = $(this).data("draggable"), o = i.options;
i.snapElements = []; i.snapElements = [];
@ -796,13 +787,13 @@ $.ui.plugin.add("draggable", "snap", {
(inst.options.snap.snap && inst.options.snap.snap.call(inst.element, event, $.extend(inst._uiHash(), { snapItem: inst.snapElements[i].item }))); (inst.options.snap.snap && inst.options.snap.snap.call(inst.element, event, $.extend(inst._uiHash(), { snapItem: inst.snapElements[i].item })));
inst.snapElements[i].snapping = (ts || bs || ls || rs || first); inst.snapElements[i].snapping = (ts || bs || ls || rs || first);
}; }
} }
}); });
$.ui.plugin.add("draggable", "stack", { $.ui.plugin.add("draggable", "stack", {
start: function(event, ui) { start: function() {
var o = $(this).data("draggable").options; var o = $(this).data("draggable").options;
@ -811,7 +802,7 @@ $.ui.plugin.add("draggable", "stack", {
}); });
if (!group.length) { return; } if (!group.length) { return; }
var min = parseInt(group[0].style.zIndex) || 0; var min = parseInt(group[0].style.zIndex, 10) || 0;
$(group).each(function(i) { $(group).each(function(i) {
this.style.zIndex = min + i; this.style.zIndex = min + i;
}); });