Jquery draggable error in responsive scaling

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.