From dc5c4b3b48eeac1e5931fb5496f5a46f3f24bd7d Mon Sep 17 00:00:00 2001 From: marcusf Date: Mon, 24 May 2010 20:08:06 +0200 Subject: [PATCH] Sortable: Introduces option containmentElasticity to allow for items to move a few pixels outside their containment when dragging; By no means a perfect fix but a possible first stab. Tries fixing #5620 - Sortable along y-axis with parent containment fails to put large item at the bottom of list when dragging --- .../visual/sortable/sortable_ticket_5620.html | 37 +++++++++++++++++++ ui/jquery.ui.sortable.js | 32 +++++++++++++--- 2 files changed, 64 insertions(+), 5 deletions(-) create mode 100644 tests/visual/sortable/sortable_ticket_5620.html diff --git a/tests/visual/sortable/sortable_ticket_5620.html b/tests/visual/sortable/sortable_ticket_5620.html new file mode 100644 index 00000000000..773b20d21c7 --- /dev/null +++ b/tests/visual/sortable/sortable_ticket_5620.html @@ -0,0 +1,37 @@ + + + + + Sortable Visual Test : Sortable ticket #5620 + + + + + + + + + + + + + + + +
+
Element 1
+
Element 2
+
Element 3
+
Element 4
+
Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long textVery long text
+
Element 5
+
+ + diff --git a/ui/jquery.ui.sortable.js b/ui/jquery.ui.sortable.js index ba0b283933f..7b5eac54049 100644 --- a/ui/jquery.ui.sortable.js +++ b/ui/jquery.ui.sortable.js @@ -21,6 +21,7 @@ $.widget("ui.sortable", $.ui.mouse, { axis: false, connectWith: false, containment: false, + containmentElasticity: false, cursor: 'auto', cursorAt: false, dropOnEmpty: true, @@ -183,10 +184,14 @@ $.widget("ui.sortable", $.ui.mouse, { //Create the placeholder this._createPlaceholder(); + + // Clear and reset previous elasticity settings + this._setElasticity(); //Set a containment if given in the options - if(o.containment) + if(o.containment) { this._setContainment(); + } if(o.cursor) { // cursor option if ($('body').css("cursor")) this._storedCursor = $('body').css("cursor"); @@ -333,6 +338,8 @@ $.widget("ui.sortable", $.ui.mouse, { //If we are using droppables, inform the manager about the drop if ($.ui.ddmanager && !this.options.dropBehaviour) $.ui.ddmanager.drop(this, event); + + this._clearElasticity(); if(this.options.revert) { var self = this; @@ -839,6 +846,20 @@ $.widget("ui.sortable", $.ui.mouse, { height: this.helper.outerHeight() }; }, + + _setElasticity: function() { + this._clearElasticity(); + var o = this.options; + if (o.containment != 'document' && o.containment != 'window' && o.containmentElasticity) { + var ABSOLUTE_FUDGE = 10; + this._elasticity.x = this.currentItem.width() + ABSOLUTE_FUDGE; + this._elasticity.y = this.currentItem.height() + ABSOLUTE_FUDGE; + } + }, + + _clearElasticity: function() { + this._elasticity = { x: 0, y: 0 }; + }, _setContainment: function() { @@ -912,10 +933,11 @@ $.widget("ui.sortable", $.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; + + if(event.pageX - this.offset.click.left < this.containment[0] - this._elasticity.x) pageX = this.containment[0] + this.offset.click.left + this._elasticity.x; + if(event.pageY - this.offset.click.top < (this.containment[1] - this._elasticity.y)) pageY = this.containment[1] + this.offset.click.top - this._elasticity.y; + if(event.pageX - this.offset.click.left > this.containment[2] + this._elasticity.x) pageX = this.containment[2] + this.offset.click.left - this._elasticity.x; + if(event.pageY - this.offset.click.top > (this.containment[3] + this._elasticity.y)) pageY = this.containment[3] + this.offset.click.top + this._elasticity.y; } if(o.grid) {