Skip to content

Commit

Permalink
Draggable: Handle containment set to false after init, and style impr…
Browse files Browse the repository at this point in the history 
…ovements. Fixes #8962 - Containment doesn't properly update

(cherry picked from commit dc5254a)
  • Loading branch information
@mikesherov @scottgonzalez
mikesherov authored and scottgonzalez committed Apr 17, 2013
1 parent 9ac505b commit 507043c
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 42 deletions.
7 changes: 3 additions & 4 deletions tests/unit/draggable/draggable_options.js
View file
Expand Up @@ -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 });

Expand All @@ -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() {
Expand Down
93 changes: 55 additions & 38 deletions ui/jquery.ui.draggable.js
View file
Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 507043c

Please sign in to comment.