Question
Drag, Drop and Constraining - HTML5 Canvas
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;
}
}