Handle case when breadcrumb and filelist item overlap

and both receive a drop.

Build breadcrumb over and out callback in filelist.js and
pass them as options to utilize local selectors of filelist

Re-enable td elements after drop to bread crumb

Fix# drop handler still being called after enable,
it seems that waiting for a short time before re-enabling solves the
problem

* Add explanations for setTimeout re-enable td.filename drop handler

2 files changed, 19 insertions, 0 deletions

diff --git a/apps/files/js/breadcrumb.js b/apps/files/js/breadcrumb.js
index 364475e4a4f..58ac9924ef7 100644
--- a/apps/files/js/breadcrumb.js
+++ b/apps/files/js/breadcrumb.js
@@ -39,6 +39,8 @@
 		}
 		if (options.onDrop) {
 			this.onDrop = options.onDrop;
+			this.onOver = options.onOver;
+			this.onOut = options.onOut;
 		}
 		if (options.getCrumbUrl) {
 			this.getCrumbUrl = options.getCrumbUrl;
@@ -60,6 +62,8 @@
 		breadcrumbs: [],
 		onClick: null,
 		onDrop: null,
+		onOver: null,
+		onOut: null,
 
 		/**
 		 * Sets the directory to be displayed as breadcrumb.
@@ -127,6 +131,8 @@
 			if (this.onDrop) {
 				this.$el.find('.crumb:not(.last)').droppable({
 					drop: this.onDrop,
+					over: this.onOver,
+					out: this.onOut,
 					tolerance: 'pointer'
 				});
 			}
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index bfcc77d8999..6229d3b2316 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -250,6 +250,12 @@
 			// if dropping on folders is allowed, then also allow on breadcrumbs
 			if (this._folderDropOptions) {
 				breadcrumbOptions.onDrop = _.bind(this._onDropOnBreadCrumb, this);
+				breadcrumbOptions.onOver = function() {
+					self.$el.find('td.filename.ui-droppable').droppable('disable');
+				}
+				breadcrumbOptions.onOut = function() {
+					self.$el.find('td.filename.ui-droppable').droppable('enable');
+				}
 			}
 			this.breadcrumb = new OCA.Files.BreadCrumb(breadcrumbOptions);
 
@@ -758,6 +764,13 @@
 			}
 
 			this.move(_.pluck(files, 'name'), targetPath);
+
+			// re-enable td elements to be droppable
+			// sometimes the filename drop handler is still called after re-enable,
+			// it seems that waiting for a short time before re-enabling solves the problem
+			setTimeout(function() {
+				self.$el.find('td.filename.ui-droppable').droppable('enable');
+			}, 10);
 		},
 
 		/**