dragIntent.js

// As good as pseudo code at the moment.

function dragIntent(event, callback) {
  // Accepts a mousedown event and interprets whether or not the
  // user's intention is to drag the target element.
  // @event: A mousedown event.
  // @callback: The function to be fired if the event is interpreted as a drag.

  var x1 = event.pageX;
  var y1 = event.pageY;

  $(this).bind('mousemove', function (event) {
    if moveThreshold(event) {
      this.cleanup();
      return callback();
    }
  });

  $(this).bind('mouseup', function () {
    this.cleanup();
    return false;
  });

  var timer = setTimeout(function () {
    // Interprets the user holding the mouse button down for a given period of
    // time as the intention to drag.
    this.cleanup();
    return callback();
  }, 500);

  this.moveThreshold = function (event) {
    // Accepts a mousemove event and interprets the user moving their cursor a
    // given distance with the mouse button depressed as the intention to drag.
    // @event: A mousemove event.

    var x2 = event.pageX;
    var y2 = event.pageY;
    var threshold = 10;

    if (x1 - x2 > threshold || x1 - x2 < (-threshold) || y1 - y2 > threshold || y1 - y2 < (-threshold)) {
      return true;
    }
  };

  this.cleanup = function () {
    $(this).unbind('mousemove');
    $(this).unbind('mouseup');
    clearTimeout(timer);
  };
}