From 6358695df18722d8c7e99437365db42cf4957626 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Sat, 26 Jan 2013 15:31:27 -0500 Subject: [PATCH] Draggable: Fix border containment. Fixed #5569 - Draggable: Containment incorrectly calculates padding and border --- tests/unit/draggable/draggable_options.js | 31 +++++++++++++++++++++++ ui/jquery.ui.draggable.js | 4 +-- 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/tests/unit/draggable/draggable_options.js b/tests/unit/draggable/draggable_options.js index ccbe7224a..2e9f85c24 100644 --- a/tests/unit/draggable/draggable_options.js +++ b/tests/unit/draggable/draggable_options.js @@ -346,6 +346,37 @@ test( "{ containment: 'parent' }, absolute", function() { deepEqual( offsetAfter, expected, "compare offset to parent" ); }); +test( "containment, account for border", function() { + expect( 2 ); + + var el = $("#draggable1").appendTo("#main"), + parent = el.parent().css({ + height: "100px", + width: "100px", + borderStyle: "solid", + borderWidth: "5px 10px 15px 20px" + }), + parentBottom = parent.offset().top + parent.outerHeight(), + parentRight = parent.offset().left + parent.outerWidth(), + parentBorderBottom = TestHelpers.draggable.border( parent, "bottom" ), + parentBorderRight = TestHelpers.draggable.border( parent, "right" ); + + el.css({ + height: "5px", + width: "5px" + }).draggable({ containment: "parent" }); + + el.simulate( "drag", { + dx: 100, + dy: 100 + }); + + equal( el.offset().top, parentBottom - parentBorderBottom - el.height(), + "The draggable should be on top of its parent's bottom border" ); + equal( el.offset().left, parentRight - parentBorderRight - el.width(), + "The draggable should be to the right of its parent's right border" ); +}); + test( "containment, default, switching after initialization", function() { expect( 2 ); diff --git a/ui/jquery.ui.draggable.js b/ui/jquery.ui.draggable.js index 7c1fb3361..56b8fc77d 100644 --- a/ui/jquery.ui.draggable.js +++ b/ui/jquery.ui.draggable.js @@ -421,8 +421,8 @@ $.widget("ui.draggable", $.ui.mouse, { 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("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 + (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 ]; this.relative_container = c;