Drag, Drop and Constraining - HTML5 Canvas

[FlatChat]

I have the following code to drag a symbol which I found from here 

A few questions:

• Is there an Adobe tutorial or guide for drag, drop and constraining in HTML5 Canvas?  Anything else that might be recommended?
• How would this code be modified to include a bounding box constraint?
• How would it be modified to have a drop behaviour, and have it snap to the obejective?

createjs.Touch.enable(stage);

this.ConcaveSphereLens.on("mousedown", onMouseDown.bind(this));
this.ConcaveSphereLens.on("pressmove", onMouseMove.bind(this));
this.ConcaveSphereLens.on("pressup", onMouseUp.bind(this));
this.ConcaveSphereLens.objective = this.objective;


function onMouseDown(evt){
	var item = evt.currentTarget;
	item.offset = {x:0, y:0};

	var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
	item.offset.x = pt.x - item.x;
	item.offset.y = pt.y - item.y;
	item.drag = true;
}


function onMouseMove(evt){
	var item = evt.currentTarget;
	if(item.drag){

	var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
	item.x = pt.x - item.offset.x;
	item.y = pt.y - item.offset.y;
	}
}

[FlatChat]

OK, I have the drag & drop sorted, and now need some help with the snap alignment.

The snap is working, BUT I need to get the alignment of the draggable correct with the drop target.  At the moment the dropped symbol is sitting slightly below centre of the hitBox.  You can see this with the hitbox (large purple rectangle - for testing semi transparent) on the target and the smaller square purple symbol overlayed near the pupil - the dot mc on the droppable.

Rather than adjust the transform points of the drop and target symbols, how can I change the code to play with the offset? 

I can't change the transform points of the symbols, as I need to rotate them later after the drop on a common centre point (the centre of the lens and the middle of the holding frame (centered on the pupil)).

//Drag and Drop lens onto trial frame behaviours
createjs.Touch.enable(stage);

var Lenses = [this.ConcaveSphereLens, this.ConvexSphereLens, this.ConcaveCylinderLens, this.ConvexCylinderLens, this.PrismLens, this.AccessoryLens];

	// Apply the same code for each lens MovieClip symbol in the array Lenses with a For Loop
for(var i = 0; i<Lenses.length; i++){	
	Lenses[i].on("mousedown", onMouseDown.bind(this));
	Lenses[i].on("pressmove", onMouseMove.bind(this));
	Lenses[i].on("pressup", onMouseUp.bind(this));
	Lenses[i].LFLensHolder = this.LFLensHolder;
	Lenses[i].originX = Lenses[i].x;
	Lenses[i].originY = Lenses[i].y;
}

function onMouseDown(evt){
	var item = evt.currentTarget;
	item.offset = {x:0, y:0};
	var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
	item.offset.x = pt.x - item.x;
	item.offset.y = pt.y - item.y;
	item.drag = true;
}


function onMouseUp(evt){
	var item = evt.currentTarget;
	item.drag = false;
	var pt = item.localToLocal(item.dot.x, item.dot.y, item.LFLensHolder.hitBox);
	if(item.LFLensHolder.hitBox.hitTest(pt.x, pt.y) ){
		item.x = item.LFLensHolder.x;
		item.y = item.LFLensHolder.y;
	}
}

function onMouseMove(evt){
	var item = evt.currentTarget;
	if (item.drag){
		var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
		item.x = pt.x - item.offset.x;
		item.y = pt.y - item.offset.y;
	}
}

[FlatChat]

Also, how would I change the above code to add another drop target? Currently its is 

Lenses[i].LFLensHolder = this.LFLensHolder;

Which is repeated in the onMouseUp function.

I would like to add the following target as well.

this.RFLensHolder