Je travaille actuellement sur un site mobile/web et je rentre deux petits soucis

J'ai une grande image "draggable" chargée dynamiquement mais je n'arrive pas à imposer des limites à ce draggage.
Aussi je souhaiterai disposer d'un bouton afin de pouvoir zoomer, mais là aussi je bloque !
Voici le code javascript/html que j'ai,
Merci d'avance,
var zoom = 1;
function zoomImg (){
zoom = 10;
drawImage(imageObj);
}
function drawImage(imageObj, zoomImg) {
var stage = new Kinetic.Stage("container", 10, 10);
var layer = new Kinetic.Layer();
var x = 0;
var y = 0;
var planImg = new Kinetic.Image({
image: imageObj,
x: x,
y: y,
width: largeur*zoom,
height: hauteur*zoom
});
var position1 = planImg.x;
planImg.draggable(true);
layer.add(planImg);
stage.add(layer);
}
window.onload = function(){
var imageObj = new Image();
imageObj.onload = function(){
drawImage(this);
};
imageObj.src = "plan.jpg";
};
function position(position1) {
if (position1 >= 0) {
alert("test");
}
};
document.onmousemove = position;
<div id="container"></div>
<img src="dot.png" id="bouton" onclick="bouge();">
<img src="plus.png" id="plus" onclick="zoomImg();">