I'm trying to implement a drag and drop effect by using this tutorial from Paul Trani | Drag & Drop in Edge Animate , his program works fine if my project doesnt have any responsive scaling.
Turning the responsive scaling on to "Both" causes some miscalculations in cursor.
I have also checked out another discussion with a similar question Cursor misalignment with responsive drag and drop.
But the problem persists, In my document.compositionReady section I have this code to calculate the scaleRatio
sym.xycompensation = function(){
var stage = sym.$("Stage");
var parent = sym.$("Stage").parent();
var parentWidth = parent.width();
var stageWidth = stage.width();
sym.scaleRatioWidth = stageWidth/parentWidth;
};
sym.xycompensation();
$(window).on("resize",function(){
sym.xycompensation();
});
this.drag = function(down,move,posX,posY){
if(down){
if(move){
sym.$("Eyes").css({top:posY,left:posX});
}
}
}
In my Stage.mousemove, I have this code that updates the mouse's position relative to the scaleRatioWidth
sym.posX = (e.pageX * sym.scaleRatioWidth);
sym.posY = (e.pageY * sym.scaleRatioWidth);
Lets say I have a sym call "Eyes" that I will ultimately move by dragging and dropping.
In Eyes.mousedown, I have
sym.mouseDown = 1;
In Eyes.mouseup, I have
sym.mouseDown = 0;
In Eyes.mousemove, I have
this.drag(sym.mouseDown,1,sym.posX,sym.posY);
Is there a better way to go about this?
I would really appreciate it.
Thanks.