Kineticjs - bind draggable image to canvas

Question

I'm using Kinetcjs library for handling images in our canvas so we can drag images about within the Canvas.

One issue I'm running into is that users can drag images loaded into the canvas off the canvas. This obviously causes problems when we try to get the image when the user has finished with the image as they can upload an image halfway down the canvas.

Is there anyway we can bind it so that the top of the image cant be dragged past the top of the canvas and the bottom of the image dragged past the bottom of the canvas?

Answer 1

I've got it working. For anyone interested in how to do this I did it like so:

photo.setDragBoundFunc(function(pos){                           
    var yBound = stage.getHeight()-newPhotoHeight;

    if(pos.y >= yBound && pos.y < 0)  {
        var newY =  pos.y;
    } else if(pos.y < yBound) {
        var newY = yBound;
    } else if(pos.y > 0) {
        var newY = 0;
    } else {
        var newY = pos.y;
    }

    return {
            x: this.getAbsolutePosition().x,
            y: newY
           }
    });