Draggable: Handle containment set to false after init, and style improvements. Fixes...

(cherry picked from commit dc5254aa0703f9f7fd9d290c3078a5e9267160d9)

diff --git a/tests/unit/draggable/draggable_options.js b/tests/unit/draggable/draggable_options.js
index f4fca0b2e2742bef4cc853e03250ffa3d3e38492..bf47b4354229398dcae73ea6a3099b22516df84c 100644 (file)
--- a/tests/unit/draggable/draggable_options.js
+++ b/tests/unit/draggable/draggable_options.js
@@ -378,7 +378,7 @@ test( "containment, account for border", function() {
 });
 
 test( "containment, default, switching after initialization", function() {
-       expect( 2 );
+       expect( 3 );
 
        var element = $( "#draggable1" ).draggable({ containment: false });
 
@@ -393,9 +393,8 @@ test( "containment, default, switching after initialization", function() {
 
        TestHelpers.draggable.testDrag( element, element, -100, -100, 0, 0 );
 
-       // TODO: Switching back to false does not update to false
-       // element.draggable( "option", "containment", false );
-       // TestHelpers.draggable.testDrag( element, element, -100, -100, -100, -100 );
+       element.draggable( "option", "containment", false );
+       TestHelpers.draggable.testDrag( element, element, -100, -100, -100, -100 );
 });
 
 test( "{ cursor: 'auto' }, default", function() {

diff --git a/ui/jquery.ui.draggable.js b/ui/jquery.ui.draggable.js
index 605425859c90c1e88638609e4e5b7c9304919396..fa8508354919ef88e111fbf55ade674e0fd34ff7 100644 (file)
--- a/ui/jquery.ui.draggable.js
+++ b/ui/jquery.ui.draggable.js
@@ -156,9 +156,7 @@ $.widget("ui.draggable", $.ui.mouse, {
                (o.cursorAt && this._adjustOffsetFromHelper(o.cursorAt));
 
                //Set a containment if given in the options
-               if(o.containment) {
-                       this._setContainment();
-               }
+               this._setContainment();
 
                //Trigger event + callbacks
                if(this._trigger("start", event) === false) {
@@ -383,40 +381,56 @@ $.widget("ui.draggable", $.ui.mouse, {
                var over, c, ce,
                        o = this.options;
 
-               if(o.containment === "parent") {
-                       o.containment = this.helper[0].parentNode;
+               if ( !o.containment ) {
+                       this.containment = null;
+                       return;
                }
-               if(o.containment === "document" || o.containment === "window") {
+
+               if ( o.containment === "window" ) {
                        this.containment = [
-                               o.containment === "document" ? 0 : $(window).scrollLeft() - this.offset.relative.left - this.offset.parent.left,
-                               o.containment === "document" ? 0 : $(window).scrollTop() - this.offset.relative.top - this.offset.parent.top,
-                               (o.containment === "document" ? 0 : $(window).scrollLeft()) + $(o.containment === "document" ? document : window).width() - this.helperProportions.width - this.margins.left,
-                               (o.containment === "document" ? 0 : $(window).scrollTop()) + ($(o.containment === "document" ? document : window).height() || document.body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top
+                               $( window ).scrollLeft() - this.offset.relative.left - this.offset.parent.left,
+                               $( window ).scrollTop() - this.offset.relative.top - this.offset.parent.top,
+                               $( window ).scrollLeft() + $( window ).width() - this.helperProportions.width - this.margins.left,
+                               $( window ).scrollTop() + ( $( window ).height() || document.body.parentNode.scrollHeight ) - this.helperProportions.height - this.margins.top
                        ];
+                       return;
                }
 
-               if(!(/^(document|window|parent)$/).test(o.containment) && o.containment.constructor !== Array) {
-                       c = $(o.containment);
-                       ce = c[0];
-
-                       if(!ce) {
-                               return;
-                       }
-
-                       over = ($(ce).css("overflow") !== "hidden");
-
+               if ( o.containment === "document") {
                        this.containment = [
-                               (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0),
-                               (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0),
-                               (over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css("borderRightWidth"),10) || 0) - (parseInt($(ce).css("paddingRight"),10) || 0) - this.helperProportions.width - this.margins.left - this.margins.right,
-                               (over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css("borderBottomWidth"),10) || 0) - (parseInt($(ce).css("paddingBottom"),10) || 0) - this.helperProportions.height - this.margins.top  - this.margins.bottom
+                               0,
+                               0,
+                               $( document ).width() - this.helperProportions.width - this.margins.left,
+                               ( $( document ).height() || document.body.parentNode.scrollHeight ) - this.helperProportions.height - this.margins.top
                        ];
-                       this.relative_container = c;
+                       return;
+               }
 
-               } else if(o.containment.constructor === Array) {
+               if ( o.containment.constructor === Array ) {
                        this.containment = o.containment;
+                       return;
+               }
+
+               if ( o.containment === "parent" ) {
+                       o.containment = this.helper[ 0 ].parentNode;
                }
 
+               c = $( o.containment );
+               ce = c[ 0 ];
+
+               if( !ce ) {
+                       return;
+               }
+
+               over = c.css( "overflow" ) !== "hidden";
+
+               this.containment = [
+                       ( parseInt( c.css( "borderLeftWidth" ), 10 ) || 0 ) + ( parseInt( c.css( "paddingLeft" ), 10 ) || 0 ),
+                       ( parseInt( c.css( "borderTopWidth" ), 10 ) || 0 ) + ( parseInt( c.css( "paddingTop" ), 10 ) || 0 ) ,
+                       ( over ? Math.max( ce.scrollWidth, ce.offsetWidth ) : ce.offsetWidth ) - ( parseInt( c.css( "borderRightWidth" ), 10 ) || 0 ) - ( parseInt( c.css( "paddingRight" ), 10 ) || 0 ) - this.helperProportions.width - this.margins.left - this.margins.right,
+                       ( over ? Math.max( ce.scrollHeight, ce.offsetHeight ) : ce.offsetHeight ) - ( parseInt( c.css( "borderBottomWidth" ), 10 ) || 0 ) - ( parseInt( c.css( "paddingBottom" ), 10 ) || 0 ) - this.helperProportions.height - this.margins.top  - this.margins.bottom
+               ];
+               this.relative_container = c;
        },
 
        _convertPositionTo: function(d, pos) {
@@ -469,18 +483,21 @@ $.widget("ui.draggable", $.ui.mouse, {
                 * Constrain the position to a mix of grid, containment.
                 */
 
-               if(this.originalPosition) { //If we are not dragging yet, we won't check for options
-                       if(this.containment) {
-                       if (this.relative_container){
-                               co = this.relative_container.offset();
-                               containment = [ this.containment[0] + co.left,
-                                       this.containment[1] + co.top,
-                                       this.containment[2] + co.left,
-                                       this.containment[3] + co.top ];
-                       }
-                       else {
-                               containment = this.containment;
-                       }
+               // If we are not dragging yet, we won't check for options
+               if ( this.originalPosition ) {
+                       if ( this.containment ) {
+                               if ( this.relative_container ){
+                                       co = this.relative_container.offset();
+                                       containment = [
+                                               this.containment[ 0 ] + co.left,
+                                               this.containment[ 1 ] + co.top,
+                                               this.containment[ 2 ] + co.left,
+                                               this.containment[ 3 ] + co.top
+                                       ];
+                               }
+                               else {
+                                       containment = this.containment;
+                               }
 
                                if(event.pageX - this.offset.click.left < containment[0]) {
                                        pageX = containment[0] + this.offset.click.left;