Edit in JSFiddle

;
$(function () {
    var width = document.getElementById('ui.simplesample').offsetWidth - 30;
    var height = window.innerHeight;
    var lines = 50;

    function drawLabels(layer, stage) {
        for (var i = 0; i < lines; i++) {
            var line = new Konva.Line({
                points: [10, 10, 10, 20, 75, 20],
                stroke: 'grey',
                strokeWidth: 1

            });

            var label = new Konva.Text({
                x: 13,
                y: 4,
                text: "Layer Lorem Ipsum",
                fontSize: 14
            });

            line.move({y: 20 * i});
            label.move({y: 20 * i});
            layer.add(line);
            layer.add(label);
        }
    }

    function drawAxis(layer, stage) {
        var l = layer.getWidth() - 1;
        console.log(l);
        console.log(stage.getWidth());
        for (var i = 0; i < lines; i++) {
            var axisLine = new Konva.Line({
                points: [0, 10, l, 10],
                stroke: 'grey',
                strokeWidth: .5
            });
            axisLine.move({y: 20 * i});
            var start = new Konva.Line({
                points: [0, 5, 0, 15],
                stroke: 'grey',
                strokeWidth: .5
            });
            var end = new Konva.Line({
                points: [0, l - 150, 0, l - 150],
                stroke: 'grey',
                strokeWidth: .5
            });

            var effectGroup = new Konva.Group({
                draggable: false
            });

            var effectbox = new Konva.Rect({
                x: 0,
                y: 0,
                height: 20,
                width: 150,
                stroke: 'black',
                strokeWidth: 1,
                fill: 'grey',
                opacity: .5,
                name: 'effectbox',
                draggable: true,
                dragBoundFunc: function (pos) {
                    var group = this.getParent();
                    var newX = (pos.x >= layer.getAbsolutePosition().x ? pos.x : layer.getAbsolutePosition().x );
                    group.x(newX - layer.getAbsolutePosition().x);
                    return {
                        x: newX,
                        y: this.getAbsolutePosition().y
                    };
                }
            });

            var dragStart = new Konva.Rect({
                x: effectbox.getX() - 5,
                y: effectbox.getY() + 5,
                height: 10,
                width: 10,
                stroke: 'black',
                strokeWidth: 1,
                fill: 'grey',
                draggable: true,
                dragBoundFunc: function (pos) {

                    return {
                        x: (pos.x < (layer.getAbsolutePosition().x - 5) ? layer.getAbsolutePosition().x - 5 : pos.x),
                        y: this.getAbsolutePosition().y
                    };
                }
            });
            var dragEnd = new Konva.Rect({
                x: effectbox.x() - 5 + effectbox.width(),
                y: effectbox.y() + 5,
                height: 10,
                width: 10,
                stroke: 'black',
                strokeWidth: 1,
                fill: 'grey',
                draggable: true,
                name: 'dragend',
                dragBoundFunc: function (pos) {
                    return {
                        x: (pos.x < (layer.getAbsolutePosition().x - 5) ? layer.getAbsolutePosition().x - 5 : pos.x),
                        y: this.getAbsolutePosition().y
                    };
                }
            });
            dragStart.on('dragend', function (evt) {
                var group = evt.target.getParent();
                var effectbox = group.get('.effectbox')[0];
                var dragEnd = group.get('.dragend')[0];
                var newWidth = dragEnd.x() - evt.target.x();

                effectbox.width(newWidth);
                group.x(group.x() + evt.target.getX() + 5);
                dragEnd.x(dragEnd.x() - evt.target.x() -5);
                evt.target.x(-5);
                layer.draw();

            });
            dragEnd.on('dragend', function (evt) {
                var group = evt.target.getParent();
                var effectbox = group.get('.effectbox')[0];
                var newWidth = (this.x() + 5) - effectbox.x();

                effectbox.width(newWidth);
                layer.draw();
            });

            end.move({y: 20 * i});
            start.move({y: 20 * i});
            effectGroup.add(effectbox, dragStart, dragEnd);
            effectGroup.move({y: 20 * i})
            layer.add(axisLine, start, end, effectGroup);
        }

    }


    var stage = new Konva.Stage({
        container: 'ui.simplesample',
        width: width,
        height: height
    });

    var labelLayer = new Konva.Layer({listening: false});
    var axisLayer = new Konva.Layer({x: 150});
    var dragLayer = new Konva.Layer();

    drawLabels(labelLayer, stage);

    stage.add(labelLayer, axisLayer, dragLayer);
    drawAxis(axisLayer, stage);
    stage.draw();
    $("#clickme").click(function () {
        axisLayer.move({x: 5});
        stage.draw();
    });

});
 html, body, .main,.container-fluid { height: 100%}
            #editor
            {
                height: 50%;
                display: table-row;
            }
            .container-fluid
            {
                display:table;
                width: 100%;
                margin-top: -50px;
                padding-top: 50px;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
            body {
                margin: 0px;
                padding: 0px;
            }
    <body >
        <div class="container-fluid">
            <div class="row">
                <button id="clickme">click</button>
            </div>
            <div class="row" id="editor">
                <div class="col-sm-12" id="ui.simplesample"></div>
            </div>
        </div>
    </body>