chinwag/chinwagsocial
chinwag/chinwagsocial
2
0
Fork 0
Code Issues Pull requests Releases 4 Wiki Activity

Fix drag & drop overlay flickering

Browse source
This commit is contained in:
Eugen Rochko 2017-03-31 11:48:25 +02:00
parent e8875c6046
commit bf61bc1b96
1 changed files with 42 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
app/assets/javascripts/components/features/ui/index.jsx
View file

@ -36,15 +36,31 @@ const UI = React.createClass({
this.setState({ width: window.innerWidth }); 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) { handleDragOver (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); 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) { 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 }); this.setState({ draggingOver: false });
}, },
componentWillMount () { componentWillMount () {
window.addEventListener('resize', this.handleResize, { passive: true }); window.addEventListener('resize', this.handleResize, { passive: true });
window.addEventListener('dragover', this.handleDragOver); document.addEventListener('dragenter', this.handleDragEnter, false);
window.addEventListener('drop', this.handleDrop); 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(refreshTimeline('home'));
this.props.dispatch(refreshNotifications()); this.props.dispatch(refreshNotifications());
@ -72,8 +99,14 @@ const UI = React.createClass({
componentWillUnmount () { componentWillUnmount () {
window.removeEventListener('resize', this.handleResize); window.removeEventListener('resize', this.handleResize);
window.removeEventListener('dragover', this.handleDragOver); document.removeEventListener('dragenter', this.handleDragEnter);
window.removeEventListener('drop', this.handleDrop); document.removeEventListener('dragover', this.handleDragOver);
document.removeEventListener('drop', this.handleDrop);
document.removeEventListener('dragleave', this.handleDragLeave);
},
setRef (c) {
this.node = c;
}, },
render () { render () {
@ -100,7 +133,7 @@ const UI = React.createClass({
} }
return ( return (
<div className='ui' onDragLeave={this.handleDragLeave}> <div className='ui' ref={this.setRef}>
<TabsBar /> <TabsBar />
{mountedColumns} {mountedColumns}