3 module( "draggable: options" );
5 // TODO: This doesn't actually test whether append happened, possibly remove
6 test( "{ appendTo: 'parent' }, default, no clone", function() {
8 var element = $( "#draggable2" ).draggable({ appendTo: "parent" });
9 TestHelpers.draggable.shouldMove( element );
11 element = $( "#draggable1" ).draggable({ appendTo: "parent" });
12 TestHelpers.draggable.shouldMove( element );
15 // TODO: This doesn't actually test whether append happened, possibly remove
16 test( "{ appendTo: Element }, no clone", function() {
18 var element = $( "#draggable2" ).draggable({ appendTo: $( "#draggable2" ).parent()[ 0 ] });
20 TestHelpers.draggable.shouldMove( element );
22 element = $( "#draggable1" ).draggable({ appendTo: $( "#draggable2" ).parent()[ 0 ] });
23 TestHelpers.draggable.shouldMove( element );
26 // TODO: This doesn't actually test whether append happened, possibly remove
27 test( "{ appendTo: Selector }, no clone", function() {
29 var element = $( "#draggable2" ).draggable({ appendTo: "#main" });
30 TestHelpers.draggable.shouldMove( element );
32 element = $( "#draggable1" ).draggable({ appendTo: "#main" });
33 TestHelpers.draggable.shouldMove( element );
36 test( "{ appendTo: 'parent' }, default", function() {
39 var element = $( "#draggable1" ).draggable();
41 TestHelpers.draggable.trackAppendedParent( element );
43 equal( element.draggable( "option", "appendTo" ), "parent" );
45 TestHelpers.draggable.move( element, 1, 1 );
46 equal( element.data( "last_dragged_parent" ), $( "#qunit-fixture" )[ 0 ] );
49 test( "{ appendTo: Element }", function() {
52 var appendTo = $( "#draggable2" ).parent()[ 0 ],
53 element = $( "#draggable1" ).draggable({ appendTo: appendTo });
55 TestHelpers.draggable.trackAppendedParent( element );
57 TestHelpers.draggable.move( element, 1, 1 );
58 equal( element.data( "last_dragged_parent" ), appendTo );
61 test( "{ appendTo: jQuery }", function() {
64 var appendTo = $( "#draggable2" ).parent(),
65 element = $( "#draggable1" ).draggable({ appendTo: appendTo });
67 TestHelpers.draggable.trackAppendedParent( element );
69 TestHelpers.draggable.move( element, 1, 1 );
70 equal( element.data( "last_dragged_parent" ), appendTo[ 0 ] );
73 test( "{ appendTo: Selector }", function() {
76 var appendTo = "#main",
77 element = $( "#draggable1" ).draggable({ appendTo: appendTo });
79 TestHelpers.draggable.trackAppendedParent( element );
81 TestHelpers.draggable.move( element, 1, 1 );
82 equal( element.data( "last_dragged_parent" ), $(appendTo)[ 0 ] );
85 test( "appendTo, default, switching after initialization", function() {
88 var element = $( "#draggable1" ).draggable({ helper : "clone" });
90 TestHelpers.draggable.trackAppendedParent( element );
92 // Move and make sure element was appended to fixture
93 TestHelpers.draggable.move( element, 1, 1 );
94 equal( element.data( "last_dragged_parent" ), $( "#qunit-fixture" )[ 0 ] );
96 // Move and make sure element was appended to main
97 element.draggable( "option", "appendTo", $( "#main" ) );
98 TestHelpers.draggable.move( element, 2, 2 );
99 equal( element.data( "last_dragged_parent" ), $( "#main" )[ 0 ] );
102 test( "{ axis: false }, default", function() {
104 var element = $( "#draggable2" ).draggable({ axis: false });
105 TestHelpers.draggable.shouldMove( element );
108 test( "{ axis: 'x' }", function() {
110 var element = $( "#draggable2" ).draggable({ axis: "x" });
111 TestHelpers.draggable.testDrag( element, element, 50, 50, 50, 0 );
114 test( "{ axis: 'y' }", function() {
116 var element = $( "#draggable2" ).draggable({ axis: "y" });
117 TestHelpers.draggable.testDrag( element, element, 50, 50, 0, 50 );
120 test( "{ axis: ? }, unexpected", function() {
127 "undefined": undefined,
128 "function() {}": function() {}
133 $.each(unexpected, function(key, val) {
134 element = $( "#draggable2" ).draggable({ axis: val });
135 TestHelpers.draggable.testDrag( element, element, 50, 50, 50, 50, "axis: " + key );
136 element.draggable( "destroy" );
140 test( "axis, default, switching after initialization", function() {
143 var element = $( "#draggable1" ).draggable({ axis : false });
146 TestHelpers.draggable.testDrag( element, element, 50, 50, 50, 50 );
149 element.draggable( "option", "axis", "x" );
150 TestHelpers.draggable.testDrag( element, element, 50, 50, 50, 0 );
153 element.draggable( "option", "axis", "y" );
154 TestHelpers.draggable.testDrag( element, element, 50, 50, 0, 50 );
158 test( "{ cancel: 'input,textarea,button,select,option' }, default", function() {
161 $( "<div id='draggable-option-cancel-default'><input type='text'></div>" ).appendTo( "#main" );
163 var element = $( "#draggable-option-cancel-default" ).draggable({ cancel: "input,textarea,button,select,option" });
164 TestHelpers.draggable.shouldMove( element );
166 element.draggable( "destroy" );
168 element = $( "#draggable-option-cancel-default" ).draggable({ cancel: "input,textarea,button,select,option" });
169 TestHelpers.draggable.testDrag( element, "#draggable-option-cancel-default input", 50, 50, 0, 0 );
170 element.draggable( "destroy" );
173 test( "{ cancel: 'span' }", function() {
176 var element = $( "#draggable2" ).draggable();
177 TestHelpers.draggable.testDrag( element, "#draggable2 span", 50, 50, 50, 50 );
179 element.draggable( "destroy" );
181 element = $( "#draggable2" ).draggable({ cancel: "span" });
182 TestHelpers.draggable.testDrag( element, "#draggable2 span", 50, 50, 0, 0 );
185 test( "{ cancel: ? }, unexpected", function() {
195 "undefined": undefined
198 $.each( unexpected, function( key, val ) {
199 element = $( "#draggable2" ).draggable({ cancel: val });
200 TestHelpers.draggable.shouldMove( element, "cancel: " + key );
201 element.draggable( "destroy" );
206 test( "{ cancel: Selectors }, matching parent selector", function() {
210 var element = $( "#draggable2" ).draggable({ cancel: "span a" });
212 $( "#qunit-fixture" ).append( "<span id='wrapping'><a></a></span>" );
214 element.find( "span" ).append( "<a>" );
216 $( "#wrapping a" ).append( element );
218 TestHelpers.draggable.testDrag( element, "#draggable2 span", 50, 50, 50, 50, "drag span child" );
219 TestHelpers.draggable.shouldNotMove( $( "#draggable2 span a" ) );
220 TestHelpers.draggable.shouldNotMove( $( "#wrapping a" ) );
222 $( "#draggable2" ).draggable( "option", "cancel", "span > a" );
223 $( "#draggable2" ).find( "a" ).append( "<a>" );
226 TestHelpers.draggable.testDrag( element, $( "#draggable2 span a" ).last(), 50, 50, 50, 50, "drag span child" );
227 TestHelpers.draggable.shouldNotMove( $( "#draggable2 span a" ).first() );
232 test( "cancelement, default, switching after initialization", function() {
235 $( "<div id='draggable-option-cancel-default'><input type='text'></div>" ).appendTo( "#main" );
237 var input = $( "#draggable-option-cancel-default input" ),
238 element = $( "#draggable-option-cancel-default" ).draggable();
240 TestHelpers.draggable.testDrag( element, input, 50, 50, 0, 0 );
242 element.draggable( "option", "cancel", "textarea" );
243 TestHelpers.draggable.testDrag( element, input, 50, 50, 50, 50 );
245 element.draggable( "option", "cancel", "input" );
246 TestHelpers.draggable.testDrag( element, input, 50, 50, 0, 0 );
251 test( "{ connectToSortable: selector }, default", function() {
254 ok(false, "missing test - untested code is broken code" );
258 test( "{ containment: Element }", function() {
262 element = $( "#draggable1" ).draggable({ containment: $( "#draggable1" ).parent()[ 0 ] }),
263 p = element.parent(),
266 left: po.left + TestHelpers.draggable.border( p, "left" ) + TestHelpers.draggable.margin( element, "left" ),
267 top: po.top + TestHelpers.draggable.border( p, "top" ) + TestHelpers.draggable.margin( element, "top" )
270 element.simulate( "drag", {
274 offsetAfter = element.offset();
275 deepEqual( offsetAfter, expected, "compare offset to parent" );
278 test( "{ containment: Selector }", function() {
282 element = $( "#draggable1" ).draggable({ containment: $( "#qunit-fixture" ) }),
283 p = element.parent(),
286 left: po.left + TestHelpers.draggable.border( p, "left" ) + TestHelpers.draggable.margin( element, "left" ),
287 top: po.top + TestHelpers.draggable.border( p, "top" ) + TestHelpers.draggable.margin( element, "top" )
290 element.simulate( "drag", {
294 offsetAfter = element.offset();
295 deepEqual( offsetAfter, expected, "compare offset to parent" );
298 test( "{ containment: [x1, y1, x2, y2] }", function() {
301 var element = $( "#draggable1" ).draggable(),
302 eo = element.offset();
304 element.draggable( "option", "containment", [ eo.left, eo.top, eo.left + element.width() + 5, eo.top + element.height() + 5 ] );
306 TestHelpers.draggable.testDrag( element, element, -100, -100, 0, 0 );
309 test( "{ containment: 'parent' }, relative", function() {
313 element = $( "#draggable1" ).draggable({ containment: "parent" }),
314 p = element.parent(),
317 left: po.left + TestHelpers.draggable.border( p, "left" ) + TestHelpers.draggable.margin( element, "left" ),
318 top: po.top + TestHelpers.draggable.border( p, "top" ) + TestHelpers.draggable.margin( element, "top" )
321 element.simulate( "drag", {
325 offsetAfter = element.offset();
326 deepEqual( offsetAfter, expected, "compare offset to parent" );
329 test( "{ containment: 'parent' }, absolute", function() {
333 element = $( "#draggable2" ).draggable({ containment: "parent" }),
334 p = element.parent(),
337 left: po.left + TestHelpers.draggable.border( p, "left" ) + TestHelpers.draggable.margin( element, "left" ),
338 top: po.top + TestHelpers.draggable.border( p, "top" ) + TestHelpers.draggable.margin( element, "top" )
341 element.simulate( "drag", {
345 offsetAfter = element.offset();
346 deepEqual( offsetAfter, expected, "compare offset to parent" );
349 test( "containment, account for border", function() {
352 var el = $("#draggable1").appendTo("#main"),
353 parent = el.parent().css({
356 borderStyle: "solid",
357 borderWidth: "5px 10px 15px 20px"
359 parentBottom = parent.offset().top + parent.outerHeight(),
360 parentRight = parent.offset().left + parent.outerWidth(),
361 parentBorderBottom = TestHelpers.draggable.border( parent, "bottom" ),
362 parentBorderRight = TestHelpers.draggable.border( parent, "right" );
367 }).draggable({ containment: "parent" });
369 el.simulate( "drag", {
374 equal( el.offset().top, parentBottom - parentBorderBottom - el.height(),
375 "The draggable should be on top of its parent's bottom border" );
376 equal( el.offset().left, parentRight - parentBorderRight - el.width(),
377 "The draggable should be to the right of its parent's right border" );
380 test( "containment, default, switching after initialization", function() {
383 var element = $( "#draggable1" ).draggable({ containment: false });
385 TestHelpers.draggable.testDrag( element, element, -100, -100, -100, -100 );
387 element.draggable( "option", "containment", "parent" )
392 .appendTo( $( "#main" ) );
394 TestHelpers.draggable.testDrag( element, element, -100, -100, 0, 0 );
396 // TODO: Switching back to false does not update to false
397 // element.draggable( "option", "containment", false );
398 // TestHelpers.draggable.testDrag( element, element, -100, -100, -100, -100 );
401 test( "{ cursor: 'auto' }, default", function() {
402 function getCursor() {
403 return $( "#draggable2" ).css( "cursor" );
410 element = $( "#draggable2" ).draggable({
413 actual = getCursor();
416 before = getCursor();
418 element.simulate( "drag", {
424 equal( actual, expected, "start callback: cursor '" + expected + "'" );
425 equal( after, before, "after drag: cursor restored" );
428 test( "{ cursor: 'move' }", function() {
429 function getCursor() {
430 return $( "body" ).css( "cursor" );
437 element = $( "#draggable2" ).draggable({
440 actual = getCursor();
443 before = getCursor();
445 element.simulate( "drag", {
451 equal( actual, expected, "start callback: cursor '" + expected + "'" );
452 equal( after, before, "after drag: cursor restored" );
455 test( "cursor, default, switching after initialization", function() {
458 var element = $( "#draggable1" ).draggable();
460 TestHelpers.draggable.trackMouseCss( element );
462 TestHelpers.draggable.move( element, 1, 1 );
463 equal( element.data( "last_dragged_cursor" ), "auto" );
465 element.draggable( "option", "cursor", "move" );
466 TestHelpers.draggable.move( element, 1, 1 );
467 equal( element.data( "last_dragged_cursor" ), "move" );
469 element.draggable( "option", "cursor", "ns-resize" );
470 TestHelpers.draggable.move( element, 1, 1 );
471 equal( element.data( "last_dragged_cursor" ), "ns-resize" );
474 test( "cursorAt", function() {
480 "false": { cursorAt : false },
481 "{ left: -5, top: -5 }": { x: -5, y: -5, cursorAt : { left: -5, top: -5 } },
482 "[ 10, 20 ]": { x: 10, y: 20, cursorAt : [ 10, 20 ] },
483 "'10 20'": { x: 10, y: 20, cursorAt : "10 20" },
484 "{ left: 20, top: 40 }": { x: 20, y: 40, cursorAt : { left: 20, top: 40 } },
485 "{ right: 10, bottom: 20 }": { x: 10, y: 20, cursorAt : { right: 10, bottom: 20 } }
488 $.each( tests, function( testName, testData ) {
489 $.each( [ "relative", "absolute" ], function( i, position ) {
490 var element = $( "#draggable" + ( i + 1 ) ).draggable({
491 cursorAt: testData.cursorAt,
492 drag: function( event, ui ) {
493 if( !testData.cursorAt ) {
494 equal( ui.position.left - ui.originalPosition.left, deltaX, testName + " " + position + " left" );
495 equal( ui.position.top - ui.originalPosition.top, deltaY, testName + " " + position + " top" );
496 } else if( testData.cursorAt.right ) {
497 equal( ui.helper.width() - ( event.clientX - ui.offset.left ), testData.x - TestHelpers.draggable.unreliableOffset, testName + " " + position + " left" );
498 equal( ui.helper.height() - ( event.clientY - ui.offset.top ), testData.y - TestHelpers.draggable.unreliableOffset, testName + " " +position + " top" );
500 equal( event.clientX - ui.offset.left, testData.x + TestHelpers.draggable.unreliableOffset, testName + " " + position + " left" );
501 equal( event.clientY - ui.offset.top, testData.y + TestHelpers.draggable.unreliableOffset, testName + " " + position + " top" );
506 element.simulate( "drag", {
515 test( "cursorAt, switching after initialization", function() {
521 "false": { cursorAt : false },
522 "{ left: -5, top: -5 }": { x: -5, y: -5, cursorAt : { left: -5, top: -5 } },
523 "[ 10, 20 ]": { x: 10, y: 20, cursorAt : [ 10, 20 ] },
524 "'10 20'": { x: 10, y: 20, cursorAt : "10 20" },
525 "{ left: 20, top: 40 }": { x: 20, y: 40, cursorAt : { left: 20, top: 40 } },
526 "{ right: 10, bottom: 20 }": { x: 10, y: 20, cursorAt : { right: 10, bottom: 20 } }
529 $.each( tests, function( testName, testData ) {
530 $.each( [ "relative", "absolute" ], function( i, position ) {
531 var element = $( "#draggable" + ( i + 1 ) );
534 drag: function( event, ui ) {
535 if( !testData.cursorAt ) {
536 equal( ui.position.left - ui.originalPosition.left, deltaX, testName + " " + position + " left" );
537 equal( ui.position.top - ui.originalPosition.top, deltaY, testName + " " + position + " top" );
538 } else if( testData.cursorAt.right ) {
539 equal( ui.helper.width() - ( event.clientX - ui.offset.left ), testData.x - TestHelpers.draggable.unreliableOffset, testName + " " + position + " left" );
540 equal( ui.helper.height() - ( event.clientY - ui.offset.top ), testData.y - TestHelpers.draggable.unreliableOffset, testName + " " +position + " top" );
542 equal( event.clientX - ui.offset.left, testData.x + TestHelpers.draggable.unreliableOffset, testName + " " + position + " left" );
543 equal( event.clientY - ui.offset.top, testData.y + TestHelpers.draggable.unreliableOffset, testName + " " + position + " top" );
548 element.draggable( "option", "cursorAt", false );
549 element.draggable( "option", "cursorAt", testData.cursorAt );
551 element.simulate( "drag", {
560 test( "disabled", function() {
563 var element = $( "#draggable1" ).draggable();
565 TestHelpers.draggable.shouldMove( element );
567 element.draggable( "option", "disabled", true );
568 TestHelpers.draggable.shouldNotMove( element );
570 element.draggable( "option", "disabled", false );
571 TestHelpers.draggable.shouldMove( element );
574 test( "{ grid: [50, 50] }, relative", function() {
577 var element = $( "#draggable1" ).draggable({ grid: [ 50, 50 ] });
578 TestHelpers.draggable.testDrag( element, element, 24, 24, 0, 0 );
579 TestHelpers.draggable.testDrag( element, element, 26, 25, 50, 50 );
582 test( "{ grid: [50, 50] }, absolute", function() {
585 var element = $( "#draggable2" ).draggable({ grid: [ 50, 50 ] });
586 TestHelpers.draggable.testDrag( element, element, 24, 24, 0, 0 );
587 TestHelpers.draggable.testDrag( element, element, 26, 25, 50, 50 );
590 test( "grid, switching after initialization", function() {
593 var element = $( "#draggable1" ).draggable();
596 TestHelpers.draggable.testDrag( element, element, 24, 24, 24, 24 );
597 TestHelpers.draggable.testDrag( element, element, 0, 0, 0, 0 );
599 element.draggable( "option", "grid", [ 50,50 ] );
601 TestHelpers.draggable.testDrag( element, element, 24, 24, 0, 0 );
602 TestHelpers.draggable.testDrag( element, element, 26, 25, 50, 50 );
605 test( "{ handle: 'span' }", function() {
608 var element = $( "#draggable2" ).draggable({ handle: "span" });
610 TestHelpers.draggable.testDrag( element, "#draggable2 span", 50, 50, 50, 50, "drag span" );
611 TestHelpers.draggable.testDrag( element, "#draggable2 span em", 50, 50, 50, 50, "drag span child" );
612 TestHelpers.draggable.shouldNotMove( element, "drag element" );
615 test( "handle, default, switching after initialization", function() {
618 var element = $( "#draggable2" ).draggable();
620 TestHelpers.draggable.testDrag( element, element, 50, 50, 50, 50 );
621 TestHelpers.draggable.testDrag( element, "#draggable2 span", 100, 100, 100, 100 );
624 element.draggable( "option", "handle", "span" );
625 TestHelpers.draggable.testDrag( element, element, 50, 50, 0, 0 );
626 TestHelpers.draggable.testDrag( element, "#draggable2 span", 100, 100, 100, 100 );
629 element.draggable( "option", "handle", false );
630 TestHelpers.draggable.testDrag( element, element, 50, 50, 50, 50 );
631 TestHelpers.draggable.testDrag( element, "#draggable2 span", 100, 100, 100, 100 );
634 test( "helper, default, switching after initialization", function() {
637 var element = $( "#draggable1" ).draggable();
638 TestHelpers.draggable.shouldMove( element );
640 element.draggable( "option", "helper", "clone" );
641 TestHelpers.draggable.shouldNotMove( element );
643 element.draggable( "option", "helper", "original" );
644 TestHelpers.draggable.shouldMove( element );
647 test( "{ helper: 'clone' }, relative", function() {
650 var element = $( "#draggable1" ).draggable({ helper: "clone" });
651 TestHelpers.draggable.shouldNotMove( element );
654 test( "{ helper: 'clone' }, absolute", function() {
657 var element = $( "#draggable2" ).draggable({ helper: "clone" });
658 TestHelpers.draggable.shouldNotMove( element );
661 test( "{ helper: 'original' }, relative, with scroll offset on parent", function() {
664 var element = $( "#draggable1" ).draggable({ helper: "original" });
666 TestHelpers.draggable.setScroll();
667 TestHelpers.draggable.testScroll( element, "relative" );
669 TestHelpers.draggable.setScroll();
670 TestHelpers.draggable.testScroll( element, "static" );
672 TestHelpers.draggable.setScroll();
673 TestHelpers.draggable.testScroll( element, "absolute" );
675 TestHelpers.draggable.restoreScroll();
678 test( "{ helper: 'original' }, relative, with scroll offset on root", function() {
681 var element = $( "#draggable1" ).draggable({ helper: "original" });
683 TestHelpers.draggable.setScroll( "root" );
684 TestHelpers.draggable.testScroll( element, "relative" );
686 TestHelpers.draggable.setScroll( "root" );
687 TestHelpers.draggable.testScroll( element, "static" );
689 TestHelpers.draggable.setScroll( "root" );
690 TestHelpers.draggable.testScroll( element, "absolute" );
692 TestHelpers.draggable.restoreScroll( "root" );
695 test( "{ helper: 'original' }, relative, with scroll offset on root and parent", function() {
698 var element = $( "#draggable1" ).draggable({ helper: "original" });
700 TestHelpers.draggable.setScroll();
701 TestHelpers.draggable.setScroll( "root" );
702 TestHelpers.draggable.testScroll( element, "relative" );
704 TestHelpers.draggable.setScroll();
705 TestHelpers.draggable.setScroll( "root" );
706 TestHelpers.draggable.testScroll( element, "static" );
708 TestHelpers.draggable.setScroll();
709 TestHelpers.draggable.setScroll( "root" );
710 TestHelpers.draggable.testScroll( element, "absolute" );
712 TestHelpers.draggable.restoreScroll();
713 TestHelpers.draggable.restoreScroll( "root" );
716 test( "{ helper: 'original' }, absolute, with scroll offset on parent", function() {
719 var element = $( "#draggable1" ).css({ position: "absolute", top: 0, left: 0 }).draggable({ helper: "original" });
721 TestHelpers.draggable.setScroll();
722 TestHelpers.draggable.testScroll( element, "relative" );
724 TestHelpers.draggable.setScroll();
725 TestHelpers.draggable.testScroll( element, "static" );
727 TestHelpers.draggable.setScroll();
728 TestHelpers.draggable.testScroll( element, "absolute" );
730 TestHelpers.draggable.restoreScroll();
733 test( "{ helper: 'original' }, absolute, with scroll offset on root", function() {
736 var element = $( "#draggable1" ).css({ position: "absolute", top: 0, left: 0 }).draggable({ helper: "original" });
738 TestHelpers.draggable.setScroll( "root" );
739 TestHelpers.draggable.testScroll( element, "relative" );
741 TestHelpers.draggable.setScroll( "root" );
742 TestHelpers.draggable.testScroll( element, "static" );
744 TestHelpers.draggable.setScroll( "root" );
745 TestHelpers.draggable.testScroll( element, "absolute" );
747 TestHelpers.draggable.restoreScroll( "root" );
750 test( "{ helper: 'original' }, absolute, with scroll offset on root and parent", function() {
753 var element = $( "#draggable1" ).css({ position: "absolute", top: 0, left: 0 }).draggable({ helper: "original" });
755 TestHelpers.draggable.setScroll();
756 TestHelpers.draggable.setScroll( "root" );
757 TestHelpers.draggable.testScroll( element, "relative" );
759 TestHelpers.draggable.setScroll();
760 TestHelpers.draggable.setScroll( "root" );
761 TestHelpers.draggable.testScroll( element, "static" );
763 TestHelpers.draggable.setScroll();
764 TestHelpers.draggable.setScroll( "root" );
765 TestHelpers.draggable.testScroll( element, "absolute" );
767 TestHelpers.draggable.restoreScroll();
768 TestHelpers.draggable.restoreScroll( "root" );
771 test( "{ helper: 'original' }, fixed, with scroll offset on parent", function() {
774 var element = $( "#draggable1" ).css({ position: "fixed", top: 0, left: 0 }).draggable({ helper: "original" });
776 TestHelpers.draggable.setScroll();
777 TestHelpers.draggable.testScroll( element, "relative" );
779 TestHelpers.draggable.setScroll();
780 TestHelpers.draggable.testScroll( element, "static" );
782 TestHelpers.draggable.setScroll();
783 TestHelpers.draggable.testScroll( element, "absolute" );
785 TestHelpers.draggable.restoreScroll();
788 test( "{ helper: 'original' }, fixed, with scroll offset on root", function() {
791 var element = $( "#draggable1" ).css({ position: "fixed", top: 0, left: 0 }).draggable({ helper: "original" });
793 TestHelpers.draggable.setScroll( "root" );
794 TestHelpers.draggable.testScroll( element, "relative" );
796 TestHelpers.draggable.setScroll( "root" );
797 TestHelpers.draggable.testScroll( element, "static" );
799 TestHelpers.draggable.setScroll( "root" );
800 TestHelpers.draggable.testScroll( element, "absolute" );
802 TestHelpers.draggable.restoreScroll( "root" );
805 test( "{ helper: 'original' }, fixed, with scroll offset on root and parent", function() {
808 var element = $( "#draggable1" ).css({ position: "fixed", top: 0, left: 0 }).draggable({ helper: "original" });
810 TestHelpers.draggable.setScroll();
811 TestHelpers.draggable.setScroll( "root" );
812 TestHelpers.draggable.testScroll( element, "relative" );
814 TestHelpers.draggable.setScroll();
815 TestHelpers.draggable.setScroll( "root" );
816 TestHelpers.draggable.testScroll( element, "static" );
818 TestHelpers.draggable.setScroll();
819 TestHelpers.draggable.setScroll( "root" );
820 TestHelpers.draggable.testScroll( element, "absolute" );
822 TestHelpers.draggable.restoreScroll();
823 TestHelpers.draggable.restoreScroll( "root" );
826 test( "{ helper: 'clone' }, absolute", function() {
829 var helperOffset = null,
830 origOffset = $( "#draggable1" ).offset(),
831 element = $( "#draggable1" ).draggable({ helper: "clone", drag: function( event, ui) {
832 helperOffset = ui.helper.offset();
835 element.simulate( "drag", {
839 deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
842 test( "{ helper: 'clone' }, absolute with scroll offset on parent", function() {
845 TestHelpers.draggable.setScroll();
846 var helperOffset = null,
848 element = $( "#draggable1" ).draggable({
850 drag: function( event, ui) {
851 helperOffset = ui.helper.offset();
855 $( "#main" ).css( "position", "relative" );
856 origOffset = $( "#draggable1" ).offset();
857 element.simulate( "drag", {
861 deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
863 $( "#main" ).css( "position", "static" );
864 origOffset = $( "#draggable1" ).offset();
865 element.simulate( "drag", {
869 deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
871 $( "#main" ).css( "position", "absolute" );
872 origOffset = $( "#draggable1" ).offset();
873 element.simulate( "drag", {
877 deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
879 TestHelpers.draggable.restoreScroll();
882 test( "{ helper: 'clone' }, absolute with scroll offset on root", function() {
885 TestHelpers.draggable.setScroll( "root" );
886 var helperOffset = null,
888 element = $( "#draggable1" ).draggable({
890 drag: function( event, ui) {
891 helperOffset = ui.helper.offset();
895 $( "#main" ).css( "position", "relative" );
896 origOffset = $( "#draggable1" ).offset();
897 element.simulate( "drag", {
901 deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
903 $( "#main" ).css( "position", "static" );
904 origOffset = $( "#draggable1" ).offset();
905 element.simulate( "drag", {
909 deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
911 $( "#main" ).css( "position", "absolute" );
912 origOffset = $( "#draggable1" ).offset();
913 element.simulate( "drag", {
917 deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
919 TestHelpers.draggable.restoreScroll( "root" );
922 test( "{ helper: 'clone' }, absolute with scroll offset on root and parent", function() {
925 TestHelpers.draggable.setScroll( "root" );
926 TestHelpers.draggable.setScroll();
928 var helperOffset = null,
930 element = $( "#draggable1" ).draggable({
932 drag: function( event, ui) {
933 helperOffset = ui.helper.offset();
937 $( "#main" ).css( "position", "relative" );
938 origOffset = $( "#draggable1" ).offset();
939 element.simulate( "drag", {
943 deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
945 $( "#main" ).css( "position", "static" );
946 origOffset = $( "#draggable1" ).offset();
947 element.simulate( "drag", {
951 deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
953 $( "#main" ).css( "position", "absolute" );
954 origOffset = $( "#draggable1" ).offset();
955 element.simulate( "drag", {
959 deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
961 TestHelpers.draggable.restoreScroll( "root" );
962 TestHelpers.draggable.restoreScroll();
965 test( "{ opacity: 0.5 }", function() {
969 element = $( "#draggable2" ).draggable({
972 opacity = $(this).css( "opacity" );
976 element.simulate( "drag", {
981 equal( opacity, 0.5, "start callback: opacity is" );
984 test( "opacity, default, switching after initialization", function() {
988 element = $( "#draggable2" ).draggable({
990 opacity = $(this).css( "opacity" );
994 TestHelpers.draggable.move( element, 1, 1 );
997 element.draggable( "option", "opacity", 0.5 );
998 TestHelpers.draggable.move( element, 2, 1 );
999 equal( opacity, 0.5 );
1001 element.draggable( "option", "opacity", false );
1002 TestHelpers.draggable.move( element, 3, 1 );
1003 equal( opacity, 1 );
1006 asyncTest( "revert and revertDuration", function() {
1009 var element = $( "#draggable2" ).draggable({
1013 TestHelpers.draggable.shouldNotMove( element, "revert: true, revertDuration: 0 should revert immediately" );
1015 $( "#draggable2" ).draggable( "option", "revert", "invalid" );
1016 TestHelpers.draggable.shouldNotMove( element, "revert: invalid, revertDuration: 0 should revert immediately" );
1018 $( "#draggable2" ).draggable( "option", "revert", false );
1019 TestHelpers.draggable.shouldMove( element, "revert: false should allow movement" );
1021 $( "#draggable2" ).draggable( "option", {
1023 revertDuration: 200,
1029 // animation are async, so test for it asynchronously
1030 TestHelpers.draggable.move( element, 50, 50 );
1031 setTimeout( function() {
1032 ok( $( "#draggable2" ).is( ":animated" ), "revert: true with revertDuration should animate" );
1036 test( "revert: valid", function() {
1039 var element = $( "#draggable2" ).draggable({
1044 $( "#droppable" ).droppable();
1046 TestHelpers.draggable.testDrag( element, element, 100, 100, 0, 0, "revert: valid reverts when dropped on a droppable" );
1049 test( "scope", function() {
1052 var element = $( "#draggable2" ).draggable({
1058 $( "#droppable" ).droppable({ scope: "tasks" });
1060 TestHelpers.draggable.testDrag( element, element, 100, 100, 0, 0, "revert: valid reverts when dropped on a droppable" );
1062 $( "#droppable" ).droppable( "destroy" ).droppable({ scope: "nottasks" });
1064 TestHelpers.draggable.testDrag( element, element, 100, 100, 100, 100, "revert: valid reverts when dropped on a droppable" );
1067 test( "scroll, scrollSensitivity, and scrollSpeed", function() {
1070 var viewportHeight = $( window ).height(),
1071 element = $( "#draggable1" ).draggable({ scroll: true }),
1072 scrollSensitivity = element.draggable( "option", "scrollSensitivity" ),
1073 scrollSpeed = element.draggable( "option", "scrollSpeed" );
1076 top: viewportHeight - scrollSensitivity - 1,
1080 element.simulate( "drag", {
1082 y: viewportHeight - scrollSensitivity - 1,
1086 ok( $( window ).scrollTop() === 0, "scroll: true doesn't scroll when the element is dragged outside of scrollSensitivity" );
1088 element.draggable( "option", "scrollSensitivity", scrollSensitivity + 10 );
1091 top: viewportHeight - scrollSensitivity - 1,
1095 element.simulate( "drag", {
1097 y: viewportHeight - scrollSensitivity - 1,
1101 ok( $( window ).scrollTop() === scrollSpeed, "scroll: true scrolls when the element is dragged within scrollSensitivity" );
1103 TestHelpers.draggable.restoreScroll( document );
1106 test( "snap, snapMode, and snapTolerance", function() {
1111 element = $( "#draggable1" ).draggable({
1114 snapTolerance: snapTolerance
1116 element2 = $( "#draggable2" ).draggable();
1123 newX = element2.offset().left - element.outerWidth() - snapTolerance - 2;
1124 newY = element2.offset().top;
1126 element.simulate( "drag", {
1133 deepEqual( element.offset(), { top: newY, left: newX }, "doesn't snap outside the snapTolerance" );
1137 element.simulate( "drag", {
1144 notDeepEqual( element.offset(), { top: newY, left: newX }, "snaps inside the snapTolerance" );
1146 element.draggable( "option", "snap", "#draggable2" );
1148 element.simulate( "drag", {
1155 notDeepEqual( element.offset(), { top: newY, left: newX }, "snaps based on selector" );
1157 element.draggable( "option", "snap", "#draggable3" );
1159 element.simulate( "drag", {
1166 deepEqual( element.offset(), { top: newY, left: newX }, "doesn't snap based on invalid selector" );
1168 element.draggable( "option", "snap", true );
1169 element.draggable( "option", "snapTolerance", snapTolerance - 2 );
1170 element.simulate( "drag", {
1177 deepEqual( element.offset(), { top: newY, left: newX }, "doesn't snap outside the modified snapTolerance" );
1179 element.draggable( "option", "snapTolerance", snapTolerance );
1180 element.draggable( "option", "snapMode", "inner" );
1182 element.simulate( "drag", {
1189 deepEqual( element.offset(), { top: newY, left: newX }, "doesn't snap inside the outer snapTolerance area when snapMode is inner" );
1191 newX = element2.offset().left - snapTolerance - 1;
1192 newY = element2.offset().top;
1194 element.simulate( "drag", {
1201 deepEqual( element.offset(), { top: newY, left: newX }, "doesn't snap inside the outer snapTolerance area when snapMode is inner" );
1205 element.simulate( "drag", {
1212 notDeepEqual( element.offset(), { top: newY, left: newX }, "snaps inside the inner snapTolerance area when snapMode is inner" );
1214 element.draggable( "option", "snapMode", "outer" );
1216 element.simulate( "drag", {
1223 deepEqual( element.offset(), { top: newY, left: newX }, "doesn't snap on the inner snapTolerance area when snapMode is outer" );
1226 test( "stack", function() {
1229 var element = $( "#draggable1" ).draggable({
1230 stack: "#draggable1, #draggable2"
1232 element2 = $( "#draggable2" ).draggable({
1233 stack: "#draggable1, #draggable2"
1236 TestHelpers.draggable.move( element, 1, 1 );
1237 equal( element.css( "zIndex" ), "2", "stack increments zIndex correctly" );
1239 TestHelpers.draggable.move( element2, 1, 1 );
1240 equal( element2.css( "zIndex" ), "3", "stack increments zIndex correctly" );
1243 test( "{ zIndex: 10 }", function() {
1248 element = $( "#draggable2" ).draggable({
1251 actual = $(this).css( "zIndex" );
1255 element.simulate( "drag", {
1260 equal( actual, expected, "start callback: zIndex is" );
1264 test( "zIndex, default, switching after initialization", function() {
1269 element = $( "#draggable2" ).draggable({
1271 zindex = $(this).css( "z-index" );
1275 element.css( "z-index", 1 );
1277 TestHelpers.draggable.move( element, 1, 1 );
1280 element.draggable( "option", "zIndex", 5 );
1281 TestHelpers.draggable.move( element, 2, 1 );
1284 element.draggable( "option", "zIndex", false );
1285 TestHelpers.draggable.move( element, 3, 1 );