dragdrop.js

'use strict';

var bus = require('./bus');
var throttle = require('lodash/function/throttle');

function getOffsetX(event) {
  return event.offsetX || event.layerX;
}

function getOffsetY(event) {
  return event.offsetY || event.layerY;
}

function dragdrop(el) {
  var offsetX = 0;
  var offsetY = 0;
  var throttledDragMove;

  function onDragMove(transport) {
    throttledDragMove = throttle(function(event) {
      event.relativeOffsetX = getOffsetX(event) - offsetX;
      event.relativeOffsetY = getOffsetY(event) - offsetY;
      bus.onDragOver.dispatch(event, transport);
      bus.onDragMove.dispatch(event, transport);
    }, 10);
    return throttledDragMove;
  }

  function onDragEnd(transport) {
    var mouseUpHandler = function(event) {
      event.relativeOffsetX = getOffsetX(event) + offsetX;
      event.relativeOffsetY = getOffsetY(event) + offsetY;
      el.removeEventListener('mousemove', throttledDragMove);
      el.removeEventListener('mouseup', mouseUpHandler);
      offsetX = 0;
      offsetY = 0;
      bus.onDragEnd.dispatch(event, transport);
    };
    return mouseUpHandler;
  }

  function onDragStart(transport, event) {
    if (event) {
      offsetX = getOffsetX(event);
      offsetY = getOffsetY(event);
    }
    el.addEventListener('mousemove', onDragMove(transport));
    el.addEventListener('mouseup', onDragEnd(transport));
  }

  bus.onDragStart.add(onDragStart);
}

module.exports = dragdrop;