Skip to content

Commit dc5c4b3

Browse files
author
marcusf
committed
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
1 parent 956f48a commit dc5c4b3

File tree

2 files changed

+64
-5
lines changed

2 files changed

+64
-5
lines changed

‎tests/visual/sortable/sortable_ticket_5620.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Sortable Visual Test : Sortable ticket #5620</title>
6+
<link rel="stylesheet" href="../visual.css" type="text/css" />
7+
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css">
8+
<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
9+
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
10+
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
11+
<script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script>
12+
<script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script>
13+
<script type="text/javascript" src="../../../ui/jquery.ui.droppable.js"></script>
14+
<script type="text/javascript" src="../../../ui/jquery.ui.sortable.js"></script>
15+
16+
<style>
17+
#list div {
18+
width: 100px;
19+
font-size: 12px;
20+
}
21+
</style>
22+
23+
<script type="text/javascript">
24+
jQuery(document).ready(function() { $("#list").sortable({axis: 'y', containment: 'parent', containmentElasticity: true }); });
25+
</script>
26+
</head>
27+
<body>
28+
<div id="list">
29+
<div>Element 1</div>
30+
<div>Element 2</div>
31+
<div>Element 3</div>
32+
<div>Element 4</div>
33+
<div>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</div>
34+
<div>Element 5</div>
35+
</div>
36+
</body>
37+
</html>

‎ui/jquery.ui.sortable.js‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ $.widget("ui.sortable", $.ui.mouse, {
2121
axis: false,
2222
connectWith: false,
2323
containment: false,
24+
containmentElasticity: false,
2425
cursor: 'auto',
2526
cursorAt: false,
2627
dropOnEmpty: true,
@@ -183,10 +184,14 @@ $.widget("ui.sortable", $.ui.mouse, {
183184

184185
//Create the placeholder
185186
this._createPlaceholder();
187+
188+
// Clear and reset previous elasticity settings
189+
this._setElasticity();
186190

187191
//Set a containment if given in the options
188-
if(o.containment)
192+
if(o.containment) {
189193
this._setContainment();
194+
}
190195

191196
if(o.cursor) { // cursor option
192197
if ($('body').css("cursor")) this._storedCursor = $('body').css("cursor");
@@ -333,6 +338,8 @@ $.widget("ui.sortable", $.ui.mouse, {
333338
//If we are using droppables, inform the manager about the drop
334339
if ($.ui.ddmanager && !this.options.dropBehaviour)
335340
$.ui.ddmanager.drop(this, event);
341+
342+
this._clearElasticity();
336343

337344
if(this.options.revert) {
338345
var self = this;
@@ -839,6 +846,20 @@ $.widget("ui.sortable", $.ui.mouse, {
839846
height: this.helper.outerHeight()
840847
};
841848
},
849+
850+
_setElasticity: function() {
851+
this._clearElasticity();
852+
var o = this.options;
853+
if (o.containment != 'document' && o.containment != 'window' && o.containmentElasticity) {
854+
var ABSOLUTE_FUDGE = 10;
855+
this._elasticity.x = this.currentItem.width() + ABSOLUTE_FUDGE;
856+
this._elasticity.y = this.currentItem.height() + ABSOLUTE_FUDGE;
857+
}
858+
},
859+
860+
_clearElasticity: function() {
861+
this._elasticity = { x: 0, y: 0 };
862+
},
842863

843864
_setContainment: function() {
844865

@@ -912,10 +933,11 @@ $.widget("ui.sortable", $.ui.mouse, {
912933
if(this.originalPosition) { //If we are not dragging yet, we won't check for options
913934

914935
if(this.containment) {
915-
if(event.pageX - this.offset.click.left < this.containment[0]) pageX = this.containment[0] + this.offset.click.left;
916-
if(event.pageY - this.offset.click.top < this.containment[1]) pageY = this.containment[1] + this.offset.click.top;
917-
if(event.pageX - this.offset.click.left > this.containment[2]) pageX = this.containment[2] + this.offset.click.left;
918-
if(event.pageY - this.offset.click.top > this.containment[3]) pageY = this.containment[3] + this.offset.click.top;
936+
937+
if(event.pageX - this.offset.click.left < this.containment[0] - this._elasticity.x) pageX = this.containment[0] + this.offset.click.left + this._elasticity.x;
938+
if(event.pageY - this.offset.click.top < (this.containment[1] - this._elasticity.y)) pageY = this.containment[1] + this.offset.click.top - this._elasticity.y;
939+
if(event.pageX - this.offset.click.left > this.containment[2] + this._elasticity.x) pageX = this.containment[2] + this.offset.click.left - this._elasticity.x;
940+
if(event.pageY - this.offset.click.top > (this.containment[3] + this._elasticity.y)) pageY = this.containment[3] + this.offset.click.top + this._elasticity.y;
919941
}
920942

921943
if(o.grid) {

0 commit comments

Comments
 (0)