KineticJS dragBoundFunc and transition

Question

If using a dragBoundFunc, how (if at all) is it possible to use a transition to the new point?

Let's say I've got a rect with a dragBoundFunc like this:

rect = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 100,
        height: 50,
        id: 'yellow',
        name: 'rect',
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true,
        dragBoundFunc : function(pos) {
        return {
            y : Math.round(pos.y/60)*60,
            x : this.getX(),
        }
    }
    });

How can I have a smooth transition when dragging this rect?

edit: I've created a fiddle with what I've done so far. As you can see, if you drag a rect onto another they perform a smooth transition giving feedback to the user about what's happening. What I want is this feedback of a smooth transition also when dragging the rect, that means that the move itself is a transition instead of an abrupt jump to the new position.

Answer 1

very nice jsfiddle so far, well structured as well. So what you want to do is move the drag bound function logic to the dragend event you have:

dragBoundFunc: function (pos) {
    return {
        y: Math.round(pos.y / 60) * 60, //<---- move the grid logic to a transition event to be fired on dragend
        x: this.getX(),
    }
}

you defined the grid movement vertically as constrained to every sixty pixels. You should have the dragBoundFunc allow the movement as vertical only and then, have the rectangle transition to the grid on dragend.