Skip to content

Droppable: Check if scrolling while dragging and recalculate droppable positions. Fixes #5003 - Scroll on Droppable Demo Breaks Demo #342

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kborchers wants to merge 6 commits into from
Closed

Droppable: Check if scrolling while dragging and recalculate droppable positions. Fixes #5003 - Scroll on Droppable Demo Breaks Demo #342

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
787612e
Droppable: Check if scrolling while dragging and recalculate droppabl…
kborchers May 26, 2011
5ee7085
Droppable: Moved scrolling into the widget and cleaned up code as sug…
kborchers May 26, 2011
0fa39a1
Droppable: Pushed wrong version on last commit.
kborchers May 26, 2011
4070af9
Droppable: Set scrolling to false after short timeout.
kborchers May 26, 2011
f21f7a4
Droppable: Remove scrolling var and use this.scrolling directly
kborchers May 26, 2011
d91f1e4
Droppable: Bound the scroll handler on dragstart and unbound on drags…
kborchers May 26, 2011
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 17 additions & 2 deletions ui/jquery.ui.droppable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ $.widget("ui.droppable", {
scope: 'default',
tolerance: 'intersect'
},
scrolling: false,
_create: function() {

var o = this.options, accept = o.accept;
Expand All @@ -43,7 +44,6 @@ $.widget("ui.droppable", {
$.ui.ddmanager.droppables[o.scope].push(this);

(o.addClasses && this.element.addClass("ui-droppable"));

},

destroy: function() {
Expand Down Expand Up @@ -81,6 +81,18 @@ $.widget("ui.droppable", {
if(this.options.activeClass) this.element.removeClass(this.options.activeClass);
(draggable && this._trigger('deactivate', event, this.ui(draggable)));
},

_dragStart: function(event) {
//Listen for scrolling so that if the dragging causes scrolling the position of the droppables can be recalculated (see #5003)
this.element.parentsUntil("body").scroll(function() {
this.scrolling = true;
setTimeout(function() { this.scrolling = false; }, 1);
});
},

_dragStop: function(event) {
this.element.parentsUntil("body").unbind( "scroll" );
},

_over: function(event) {

Expand Down Expand Up @@ -241,7 +253,10 @@ $.ui.ddmanager = {
drag: function(draggable, event) {

//If you have a highly dynamic page, you might try this option. It renders positions every time you move the mouse.
if(draggable.options.refreshPositions) $.ui.ddmanager.prepareOffsets(draggable, event);
//If the drag causes scrolling, recalculate the positions of the droppables (see #5003)
if(draggable.options.refreshPositions || this.scrolling) {
$.ui.ddmanager.prepareOffsets(draggable, event);
}

//Run through all droppables and check their positions based on specific tolerance options
$.each($.ui.ddmanager.droppables[draggable.options.scope] || [], function() {
Expand Down