A small draggable implementation for a lightbox

avaya_draggable.js

/**
 * @license avaya.js
 * Load avaya webchat lightbox with iframe
 * Copyright (c) 2011 EPB
 */

define([ 'jquery', 'jquery-plugins/minLight' ],
function( $ ) {
	"use strict";

	// Initiate the lightbox with minLight
	$('.avaya-link').minLight({ fadeTime: 100, maskClass: 'avaya', closeOnMaskClick: false }).click();

	var $mobileLightbox,

	/**
	 * Unbind the mousemove
	 */
	stopMove = function( event ) {
		$(this).unbind('.avaya');
		// Reset the height of the move div
		$mobileLightbox.height( 42 );
	},

	/**
	 * On mousedown, bind the mousemove function to move the lightbox
	 * @param {Object} event - The event object
	 */
	startMove = function( event ) {
		event.preventDefault();

		var // Expand the height temporarily to avoid awkward hovers
			$this = $(this).height( 1000 ),
			$lightbox = $this.parent('.lightbox'),
			lightbox = $lightbox[0],
			curMarginLeft = $lightbox.css('marginLeft'),
			startPageX = event.pageX,
			startPageY = event.pageY,
			offset = $this.offset(),

		/**
		 * Mousemove function to detect where to move the lightbox
		 * @param {Object} event - The event object
		 */
		moveLightbox = function( event ) {
			event.preventDefault();
			var marginLeft = parseInt(curMarginLeft, 10) + event.pageX - startPageX,
				top = offset.top + event.pageY - startPageY;

			lightbox.style.marginLeft = marginLeft + 'px';
			lightbox.style.top = top + 'px';
		};

		// Bind the handlers
		$(document)
			.bind( 'mousemove.avaya', moveLightbox )
			.bind( 'mouseup.avaya', stopMove );
	};

	// Add lightbox mobility
	$mobileLightbox = $('<div id="mobile-lightbox" style="cursor:move;width:100%;height:42px;position:absolute;top:0;"></div>')
		.insertAfter('#avaya-lightbox iframe')
		.mousedown( startMove );
});