commit: bf61bc1b96e63a848e7ec7984be54cb508b4bfe7
parent: e8875c6046615778c7ae6f1fc0c4a195fb5d3a03
Author: Eugen Rochko <eugen@zeonfederated.com>
Date: Fri, 31 Mar 2017 11:48:25 +0200
Fix drag & drop overlay flickering
Diffstat:
1 file changed, 42 insertions(+), 9 deletions(-)
diff --git a/app/assets/javascripts/components/features/ui/index.jsx b/app/assets/javascripts/components/features/ui/index.jsx
@@ -36,15 +36,31 @@ const UI = React.createClass({
this.setState({ width: window.innerWidth });
},
+ handleDragEnter (e) {
+ e.preventDefault();
+
+ if (!this.dragTargets) {
+ this.dragTargets = [];
+ }
+
+ if (this.dragTargets.indexOf(e.target) === -1) {
+ this.dragTargets.push(e.target);
+ }
+
+ this.setState({ draggingOver: true });
+ },
+
handleDragOver (e) {
e.preventDefault();
e.stopPropagation();
- e.dataTransfer.dropEffect = 'copy';
+ try {
+ e.dataTransfer.dropEffect = 'copy';
+ } catch (err) {
- if (e.dataTransfer.effectAllowed === 'all' || e.dataTransfer.effectAllowed === 'uninitialized') {
- this.setState({ draggingOver: true });
}
+
+ return false;
},
handleDrop (e) {
@@ -57,14 +73,25 @@ const UI = React.createClass({
}
},
- handleDragLeave () {
+ handleDragLeave (e) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ this.dragTargets = this.dragTargets.filter(el => el !== e.target && this.node.contains(el));
+
+ if (this.dragTargets.length > 0) {
+ return;
+ }
+
this.setState({ draggingOver: false });
},
componentWillMount () {
window.addEventListener('resize', this.handleResize, { passive: true });
- window.addEventListener('dragover', this.handleDragOver);
- window.addEventListener('drop', this.handleDrop);
+ document.addEventListener('dragenter', this.handleDragEnter, false);
+ document.addEventListener('dragover', this.handleDragOver, false);
+ document.addEventListener('drop', this.handleDrop, false);
+ document.addEventListener('dragleave', this.handleDragLeave, false);
this.props.dispatch(refreshTimeline('home'));
this.props.dispatch(refreshNotifications());
@@ -72,8 +99,14 @@ const UI = React.createClass({
componentWillUnmount () {
window.removeEventListener('resize', this.handleResize);
- window.removeEventListener('dragover', this.handleDragOver);
- window.removeEventListener('drop', this.handleDrop);
+ document.removeEventListener('dragenter', this.handleDragEnter);
+ document.removeEventListener('dragover', this.handleDragOver);
+ document.removeEventListener('drop', this.handleDrop);
+ document.removeEventListener('dragleave', this.handleDragLeave);
+ },
+
+ setRef (c) {
+ this.node = c;
},
render () {
@@ -100,7 +133,7 @@ const UI = React.createClass({
}
return (
- <div className='ui' onDragLeave={this.handleDragLeave}>
+ <div className='ui' ref={this.setRef}>
<TabsBar />
{mountedColumns}