Drag n Draw square

by Christopher O

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<span id="status">0, 0</span><br />
Page 1:
<div class="page" id="p1"></div><br />

Mirror 1:
<div class="mirror" id="mrp1"></div><br />

History (v. 1):
<div id="history"></div>

CSS

body { background-color: #fff; font: 16px Tahoma, Geneva, sans-serif; }

.drawn {
  //border: '1px solid white'
  background: 'rgba(0, 255, 0, .5)'
  //font: 10px Tahoma, Geneva, sans-serif;
}

.page, .mirror {
	margin: 0px;
	padding: 0px;
	width: 630px;
	border: 1px solid #999 !important;
  background: white;
  color: #fff;
  background-color: #FFF;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------------- */
#p1, #mrp1 {
	background-image: url(http://www.homeandlearn.co.uk/MW//images/Form.jpg);
	height: 200px;
}

#p2 {
	background-image: url(http://www.homeandlearn.co.uk/MW//images/Form.jpg);
	height: 150px;
}
.FloatBox {
	position: relative;
  z-index: 1000;
  display: block;
  overflow: hidden;
	
	background-color: #09F;
	margin: 0px;
	padding: 0px;
	font-size: 10px;
  white-space: nowrap;
}
/* --------------------------------------------------------------------------------- */

.history {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	color: #06F;
	margin: 10px;
	width: 600px;
	border: thin dotted #09F;
}

JavaScript

//$(document).mousemove(function(e){
//	$('#status').html(
// 		'x:' + e.pageX +
//    ', y: '+ e.pageY + ', x2: '+ parentOffset.left + ', y2: '+ parentOffset.top
//	);
//});

$(".page").mousemove(function(e){
   var parentOffset = $(this).offset();  // $(this).parent().offset();
   var relX = e.pageX - Math.round(parentOffset.left);
   var relY = e.pageY - Math.round(parentOffset.top);
   $('#status').html('x:' + relX + ', y: '+ relY + ', Docx:' + e.pageX + ', Docy: '+ e.pageY);
});

// Boxer plugin
$.widget("ui.boxer", $.extend({}, $.ui.mouse, {

  _init: function() {
    this.element.addClass("ui-boxer");

    this.dragged = false;

    this._mouseInit();

    this.helper = $(document.createElement('div'))
      .css({border:'1px dotted black'})
      //.addClass("ui-boxer-helper");
     
    
  },

  destroy: function() {
    this.element
      .removeClass("ui-boxer ui-boxer-disabled")
      .removeData("boxer")
      .unbind(".boxer");
    this._mouseDestroy();

    return this;
  },

  _mouseStart: function(event) {
    var self = this;

    this.opos = [event.pageX, event.pageY];

    if (this.options.disabled)
      return;

    var options = this.options;

    this._trigger("start", event);

    $(options.appendTo).append(this.helper);

    this.helper.css({
      "z-index": 100,
      "position": "absolute",
      "left": event.clientX,
      "top": event.clientY,
      "width": 0,
      "height": 0
    });
  },

  _mouseDrag: function(event) {
    var self = this;
    this.dragged = true;

    if (this.options.disabled)
      return;

    var options = this.options;

    var x1 = this.opos[0], y1 = this.opos[1], x2 = event.pageX, y2 = event.pageY;
    if (x1 > x2) { var tmp = x2; x2 = x1; x1 = tmp; }
    if (y1 > y2) { var tmp = y2; y2 = y1; y1 = tmp; }
    this.helper.css({left: x1, top: y1, width: x2-x1, height: y2-y1});
    
    this._trigger("drag", event);

    return false;
  },

  _mouseStop: function(event) {
    var self = this;

   ...