pseudo-drag event

DragSensor.js

(function ($) {
/*
                    up
    _________________________________
   |                                 \
   |       up                         \
   |__________________                 \    _ move             _ move
   |                  \                 \  | \                | \
   V      down         \       move      \ V /   threshold    V /       up
  S_0  ------------>  S_1  ------------>  S_2  ------------>  S_3  ------------>  S_f
   ^                                                                               |
   |_______________________________________________________________________________|
                                         lambda
*/
  // constants
  var STATE = {
    READY: 0, // S_0
    PRESSED: 1, // S_1
    MOVING: 2, // S_2
    DRAGGING: 3, // S_3
    DRAGGED: 4 // S_f
  };

  var THRESHOLD = 15/* px */;

  // Point constructor
  var Point = function (x, y) {
    this.x = x;
    this.y = y;
  };

  Point.prototype.distanceFrom = function(from) {
    var difference = {
      x: this.x - from.x,
      y: this.y - from.y
    };

    return Math.sqrt((difference.x * difference.x) + (difference.y * difference.y));
  };


  var $document = $(document);
  var state = STATE.READY;
  var pressedEvent = null;
  var pressedPoint = new Point();

  // S_0
  $document.mousedown(function (event) {
    if (state != STATE.READY) return ;

    pressedEvent = event;
    pressedPoint = new Point(event.pageX, event.pageY);

    state = STATE.PRESSED;
    $(pressedEvent.target).trigger($.Event('dragsensor.pressed', {
      target: pressedEvent.target,
      relatedTarget: pressedEvent.relatedTarget,
      pageX: event.pageX,
      pageY: event.pageY,
      which: event.which,
      metaKey: event.metaKey
    }));
  });

  // S_1
  $document.mouseup(function (event) {
    if (state != STATE.PRESSED) return ;

    state = STATE.READY;
    $(pressedEvent.target).trigger($.Event('dragsensor.ready', {
      target: pressedEvent.target,
      relatedTarget: pressedEvent.relatedTarget,
      pageX: event.pageX,
      pageY: event.pageY,
      which: event.which,
      metaKey: event.metaKey
    }));
  }).mousemove(function (event) {
    if (state != STATE.PRESSED) return ;

    state = STATE.MOVING;
    $(pressedEvent.target).trigger($.Event('dragsensor.moving', {
      target: pressedEvent.target,
      relatedTarget: pressedEvent.relatedTarget,
      pageX: event.pageX,
      pageY: event.pageY,
      which: event.which,
      metaKey: event.metaKey
    }));
  });

  // S_2
  $document.mouseup(function (event) {
    if (state != STATE.MOVING) return ;

    state = STATE.READY;
    $(pressedEvent.target).trigger($.Event('dragsensor.ready', {
      target: pressedEvent.target,
      relatedTarget: pressedEvent.relatedTarget,
      pageX: event.pageX,
      pageY: event.pageY,
      which: event.which,
      metaKey: event.metaKey
    }));
  }).mousemove(function (event) {
    if (state != STATE.MOVING) return ;

    state = STATE.MOVING;
    $(pressedEvent.target).trigger($.Event('dragsensor.moving', {
      target: pressedEvent.target,
      relatedTarget: pressedEvent.relatedTarget,
      pageX: event.pageX,
      pageY: event.pageY,
      which: event.which,
      metaKey: event.metaKey
    }));
  }).mousemove(function (event) {
    if (state != STATE.MOVING) return ;

    var currentPoint = new Point(event.pageX, event.pageY);
    if (currentPoint.distanceFrom(pressedPoint) >= THRESHOLD) {
      state = STATE.DRAGGING;
      $(pressedEvent.target).trigger($.Event('dragsensor.dragging', {
        target: pressedEvent.target,
        relatedTarget: pressedEvent.relatedTarget,
        pageX: event.pageX,
        pageY: event.pageY,
        which: event.which,
        metaKey: event.metaKey
      }));
    }
  });

  // S_3
  $document.mousemove(function (event) {
    if (state != STATE.DRAGGING) return ;

    state = STATE.DRAGGING;
    $(pressedEvent.target).trigger($.Event('dragsensor.dragging', {
      target: pressedEvent.target,
      relatedTarget: pressedEvent.relatedTarget,
      pageX: event.pageX,
      pageY: event.pageY,
      which: event.which,
      metaKey: event.metaKey
    }));
  }).mouseup(function (event) {
    if (state != STATE.DRAGGING) return ;

    state = STATE.DRAGGED;
    $(pressedEvent.target).trigger($.Event('dragsensor.dragged', {
      target: pressedEvent.target,
      relatedTarget: pressedEvent.relatedTarget,
      pageX: event.pageX,
      pageY: event.pageY,
      which: event.which,
      metaKey: event.metaKey
    }));
    state = STATE.READY;
    $(pressedEvent.target).trigger($.Event('dragsensor.ready', {
      target: pressedEvent.target,
      relatedTarget: pressedEvent.relatedTarget,
      pageX: event.pageX,
      pageY: event.pageY,
      which: event.which,
      metaKey: event.metaKey
    }));
  });
})(jQuery);