var bcg = document.querySelector("#bcg");
var w = window.getComputedStyle(bcg,null).getPropertyValue("width");
var dragDiv = document.querySelector("#draggable");


/*window.addEventListener('resize', function () { 
    window.location.reload(); 
});*/

var xy;

bcg.addEventListener("mousemove", drag, false);

function drag(e) {
	
	xy = oMousePos(bcg, e); //console.log(xy)
	var left = (xy.x - 125) > 0 ? (xy.x - 125) : 0;
	var top = xy.y -125 > 0 ? (xy.y - 125) : 0;
	dragDiv.style.WebkitTransform = "translate("+left+"px, "+top+"px)";
	dragDiv.style.transform = "translate("+left+"px, "+top+"px)";
}


function oMousePos(elmt, evt) {
      var ClientRect = elmt.getBoundingClientRect();
            return {//objeto
            x: Math.round(evt.clientX - ClientRect.left),
            y: Math.round(evt.clientY - ClientRect.top)
            }
      }