Draggable: containment now updates dynamically to handle scrolling container. Fixed...

diff --git a/ui/jquery.ui.draggable.js b/ui/jquery.ui.draggable.js
index ff1ad13639fb7703426bbe6d6607504fc5fdcf01..ed49c9d19a239d24f9a5411784f5ee9dc0f05ddd 100644 (file)
--- a/ui/jquery.ui.draggable.js
+++ b/ui/jquery.ui.draggable.js
@@ -342,16 +342,19 @@ $.widget("ui.draggable", $.ui.mouse, {
                ];
 
                if(!(/^(document|window|parent)$/).test(o.containment) && o.containment.constructor != Array) {
-                       var ce = $(o.containment)[0]; if(!ce) return;
-                       var co = $(o.containment).offset();
+                       var c = $(o.containment);
+                       var ce = c[0]; if(!ce) return;
+                       var co = c.offset();
                        var over = ($(ce).css("overflow") != 'hidden');
 
                        this.containment = [
-                               co.left + (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0),
-                               co.top + (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0),
-                               co.left+(over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css("borderLeftWidth"),10) || 0) - (parseInt($(ce).css("paddingRight"),10) || 0) - this.helperProportions.width - this.margins.left - this.margins.right,
-                               co.top+(over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css("borderTopWidth"),10) || 0) - (parseInt($(ce).css("paddingBottom"),10) || 0) - this.helperProportions.height - this.margins.top  - this.margins.bottom
+                               (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("borderLeftWidth"),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("borderTopWidth"),10) || 0) - (parseInt($(ce).css("paddingBottom"),10) || 0) - this.helperProportions.height - this.margins.top  - this.margins.bottom
                        ];
+                       this.relative_container = c;
+
                } else if(o.containment.constructor == Array) {
                        this.containment = o.containment;
                }
@@ -393,20 +396,31 @@ $.widget("ui.draggable", $.ui.mouse, {
                 */
 
                if(this.originalPosition) { //If we are not dragging yet, we won't check for options
-
-                       if(this.containment) {
-                               if(event.pageX - this.offset.click.left < this.containment[0]) pageX = this.containment[0] + this.offset.click.left;
-                               if(event.pageY - this.offset.click.top < this.containment[1]) pageY = this.containment[1] + this.offset.click.top;
-                               if(event.pageX - this.offset.click.left > this.containment[2]) pageX = this.containment[2] + this.offset.click.left;
-                               if(event.pageY - this.offset.click.top > this.containment[3]) pageY = this.containment[3] + this.offset.click.top;
+                        var containment;
+                        if(this.containment) {
+                                if (this.relative_container){
+                                    var 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;
+                               if(event.pageY - this.offset.click.top < containment[1]) pageY = containment[1] + this.offset.click.top;
+                               if(event.pageX - this.offset.click.left > containment[2]) pageX = containment[2] + this.offset.click.left;
+                               if(event.pageY - this.offset.click.top > containment[3]) pageY = containment[3] + this.offset.click.top;
                        }
 
                        if(o.grid) {
                                var top = this.originalPageY + Math.round((pageY - this.originalPageY) / o.grid[1]) * o.grid[1];
-                               pageY = this.containment ? (!(top - this.offset.click.top < this.containment[1] || top - this.offset.click.top > this.containment[3]) ? top : (!(top - this.offset.click.top < this.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 = this.originalPageX + Math.round((pageX - this.originalPageX) / o.grid[0]) * o.grid[0];
-                               pageX = this.containment ? (!(left - this.offset.click.left < this.containment[0] || left - this.offset.click.left > this.containment[2]) ? left : (!(left - this.offset.click.left < this.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;
                        }
 
                }