kineticjs not respecting dragBoundsFunc to constrain dragging

Question

I'm unable to get kineticjs to respect the dragBoundsFunc to constrain the dragging of two boxes horizontally and vertically in this example jsfiddle. What do I need to do to make the below code work?

$(function() {
    var stage = new Kinetic.Stage({
        container: 'container',
        width: $("#container").width(),
        height: window.innerHeight * 0.9,
        listening: true
    });

    var scrollAreas = new Kinetic.Group();
    var scrollBars = new Kinetic.Group();
    var scrollBarsLayer = new Kinetic.Layer();

    var hscrollArea = new Kinetic.Rect({
        x: 10,
        y: stage.getHeight() - 30,
        width: stage.getWidth() - 40,
        height: 20,
        fill: "gray",
        opacity: 0.3
    });

    var hscroll = new Kinetic.Rect({
        x: 10,
        y: stage.getHeight() - 30,
        width: 130,
        height: 20,
        fill: "orange",
        draggable: true,
          dragBoundsFunc: function(pos) {
            return {
                x: pos.x,
                y: this.getAbsolutePostion().y
            };
          },
        opacity: 0.9,
        stroke: "black",
        strokeWidth: 1
    });

    var vscrollArea = new Kinetic.Rect({
        x: stage.getWidth() - 30,
        y: 10,
        width: 20,
        height: stage.getHeight() - 40,
        fill: "gray",
        opacity: 0.3
    });

    var vscroll = new Kinetic.Rect({
        x: stage.getWidth() - 30,
        y: 10,
        width: 20,
        height: 70,
        fill: "orange",
        draggable: true,
        dragBoundsFunc: function(pos) {
            return {
                x: this.getAbsolutePosition().x,
                y: pos.y
            };
        },
        opacity: 0.9,
        stroke: "black",
        strokeWidth: 1
    });

    scrollBars.on("mouseover", function() {
        document.body.style.cursor = "pointer";
    });
    scrollBars.on("mouseout", function() {
        document.body.style.cursor = "default";
    });

    scrollAreas.add(hscrollArea);
    scrollAreas.add(vscrollArea);
    scrollBars.add(hscroll);
    scrollBars.add(vscroll);

    scrollBarsLayer.add(scrollAreas);
    scrollBarsLayer.add(scrollBars);
    stage.add(scrollBarsLayer);
});

Answer 1

It is dragBoundFunc (and not dragBoundsFunc, note the s).