I am trying to drag a container using transform translate but something is causing a jumpy behavior and I can't figure out what is the cause.
UPDATE: This must work on elements when their container is not always positioned at 0,0 from the document.
HTML:
<div id=container style=position:absolute;left:50px;top:50px;width:500px;height:500px;background-color:red;>
<div id=tcontainer style=position:relative;left:50px;top:50px;width:400px;height:400px;background-color:green;>
<div id=move style=position:relative;left:20px;top:20px;height:150px;width:150px;background-color:lightgray;>
</div>
</div>
Javascript:
obj = {startPositionX:0,startPositionY:0};
$('#move').on(mousedown,function(){
var move = $(this);
obj.startPositionX=event.offsetX+$('#tcontainer').offset().left;
obj.startPositionY=event.offsetY+$('#tcontainer').offset().top;
$(document).on(mousemove,function(e){
console.log(dragging, e.pageX-obj.startPositionX, e.pageY-obj.startPositionY);
move.css('transform','translate('+(e.pageX-obj.startPositionX)+'px, '+(e.pageY-obj.startPositionY)+'px)');
});
});
$(document).on(mouseup,function(){
$(this).off(mousemove);
});