From 507043c3a2c05b0421531e188dd857bda6f3fde9 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Sat, 23 Mar 2013 04:12:52 +0200 Subject: [PATCH] Draggable: Handle containment set to false after init, and style improvements. Fixes #8962 - Containment doesn't properly update (cherry picked from commit dc5254aa0703f9f7fd9d290c3078a5e9267160d9) --- tests/unit/draggable/draggable_options.js | 7 +- ui/jquery.ui.draggable.js | 99 +++++++++++++---------- 2 files changed, 61 insertions(+), 45 deletions(-) diff --git a/tests/unit/draggable/draggable_options.js b/tests/unit/draggable/draggable_options.js index f4fca0b2e..bf47b4354 100644 --- 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 605425859..fa8508354 100644 --- 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 === "document" || 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 - ]; + if ( !o.containment ) { + this.containment = null; + 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 === "window" ) { 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 + $( 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 ]; - this.relative_container = c; + return; + } - } else if(o.containment.constructor === Array) { + if ( o.containment === "document") { + this.containment = [ + 0, + 0, + $( document ).width() - this.helperProportions.width - this.margins.left, + ( $( document ).height() || document.body.parentNode.scrollHeight ) - this.helperProportions.height - this.margins.top + ]; + return; + } + + 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;