Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Draggable: containment now updates dynamically to handle scrolling co…

…ntainer. Fixed #4445 containment ignored when scrolling in overflow div
  • Loading branch information...
commit d62074961171ea00deaae34890b78f917d21bf68 1 parent a147304
Edward Faulkner ef4 authored

Showing 1 changed file with 28 additions and 14 deletions. Show diff stats Hide diff stats

  1. +28 14 ui/jquery.ui.draggable.js
42 ui/jquery.ui.draggable.js
@@ -342,16 +342,19 @@ $.widget("ui.draggable", $.ui.mouse, {
342 342 ];
343 343
344 344 if(!(/^(document|window|parent)$/).test(o.containment) && o.containment.constructor != Array) {
345   - var ce = $(o.containment)[0]; if(!ce) return;
346   - var co = $(o.containment).offset();
  345 + var c = $(o.containment);
  346 + var ce = c[0]; if(!ce) return;
  347 + var co = c.offset();
347 348 var over = ($(ce).css("overflow") != 'hidden');
348 349
349 350 this.containment = [
350   - co.left + (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0),
351   - co.top + (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0),
352   - 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,
353   - 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
  351 + (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0),
  352 + (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0),
  353 + (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,
  354 + (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
354 355 ];
  356 + this.relative_container = c;
  357 +
355 358 } else if(o.containment.constructor == Array) {
356 359 this.containment = o.containment;
357 360 }
@@ -393,20 +396,31 @@ $.widget("ui.draggable", $.ui.mouse, {
393 396 */
394 397
395 398 if(this.originalPosition) { //If we are not dragging yet, we won't check for options
396   -
397   - if(this.containment) {
398   - if(event.pageX - this.offset.click.left < this.containment[0]) pageX = this.containment[0] + this.offset.click.left;
399   - if(event.pageY - this.offset.click.top < this.containment[1]) pageY = this.containment[1] + this.offset.click.top;
400   - if(event.pageX - this.offset.click.left > this.containment[2]) pageX = this.containment[2] + this.offset.click.left;
401   - if(event.pageY - this.offset.click.top > this.containment[3]) pageY = this.containment[3] + this.offset.click.top;
  399 + var containment;
  400 + if(this.containment) {
  401 + if (this.relative_container){
  402 + var co = this.relative_container.offset();
  403 + containment = [ this.containment[0] + co.left,
  404 + this.containment[1] + co.top,
  405 + this.containment[2] + co.left,
  406 + this.containment[3] + co.top ];
  407 + }
  408 + else {
  409 + containment = this.containment;
  410 + }
  411 +
  412 + if(event.pageX - this.offset.click.left < containment[0]) pageX = containment[0] + this.offset.click.left;
  413 + if(event.pageY - this.offset.click.top < containment[1]) pageY = containment[1] + this.offset.click.top;
  414 + if(event.pageX - this.offset.click.left > containment[2]) pageX = containment[2] + this.offset.click.left;
  415 + if(event.pageY - this.offset.click.top > containment[3]) pageY = containment[3] + this.offset.click.top;
402 416 }
403 417
404 418 if(o.grid) {
405 419 var top = this.originalPageY + Math.round((pageY - this.originalPageY) / o.grid[1]) * o.grid[1];
406   - 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;
  420 + 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;
407 421
408 422 var left = this.originalPageX + Math.round((pageX - this.originalPageX) / o.grid[0]) * o.grid[0];
409   - 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;
  423 + 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;
410 424 }
411 425
412 426 }

0 comments on commit d620749

Please sign in to comment.
Something went wrong with that request. Please try again.