Iris/src/js/components/Dragger.js

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import * as uiActions from '../services/ui/actions';
import * as mopidyActions from '../services/mopidy/actions';
import * as spotifyActions from '../services/spotify/actions';

class Dragger extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.handleMouseUp = this.handleMouseUp.bind(this);

    this.state = {
      active: false,
      position_x: 0,
      position_y: 0,
    };
  }

  componentDidMount() {
    window.addEventListener('mousemove', this.handleMouseMove, false);
    window.addEventListener('mouseup', this.handleMouseUp, false);
  }

  componentWillUnmount() {
    window.removeEventListener('mousemove', this.handleMouseMove, false);
    window.removeEventListener('mouseup', this.handleMouseUp, false);
  }

  handleMouseMove(e) {
    if (!this.props.dragger) return null;

    const threshold = 10;
    if (
      e.clientX > this.props.dragger.start_x + threshold
			|| e.clientX < this.props.dragger.start_x - threshold
			|| e.clientY > this.props.dragger.start_y + threshold
			|| e.clientY < this.props.dragger.start_y - threshold) {
      this.setState({
        position_x: e.clientX,
        position_y: e.clientY,
      });

      const dropzones = document.getElementsByClassName('dropzone');
      for (let i = 0; i < dropzones.length; i++) {
        dropzones[i].classList.remove('hover');
      }

      if (e.target.classList.contains('dropzone') && !e.target.classList.contains('hover')) {
        e.target.className += ' hover';
      }

      // if not already, activate
      if (!this.props.dragger.active) this.props.uiActions.dragActive();
    }
  }

  handleMouseUp(e) {
    if (!this.props.dragger) return null;
    this.props.uiActions.dragEnd(e);
  }

  render() {
    if (!this.props.dragger || !this.props.dragger.active) return null;

    const style = {
      left: this.state.position_x,
      top: this.state.position_y,
    };

    return (
      <div className="dragger" style={style}>
				Dragging
        {' '}
        { this.props.dragger.victims.length }
        {' '}
things
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  dragger: state.ui.dragger,
});

const mapDispatchToProps = (dispatch) => ({
  uiActions: bindActionCreators(uiActions, dispatch),
  spotifyActions: bindActionCreators(spotifyActions, dispatch),
  mopidyActions: bindActionCreators(mopidyActions, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(Dragger);