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) {