Pan and zoom div container with draggable elements

Question

I am trying to create a virtual post it board where you can add a note, drag it, etc. I also want to be able to zoom in and out of the board and pan around. I have most of this working but when I do the pan/zoom stuff (using a library I found) the draggable elements are not able to be dragged outside the original view and the dragging does some weird stuff.

I am nots sure why it is getting stuck, do I have to expand the dimensions of the board?

Here is the Javasript:

 // Pan Zoom
    var element = document.querySelector('#board');
    var pz = panzoom(element);
    pz.pause();

    pz.on('transform', function (e) { // This event will be called along with events above.
        var pz_scale = (pz.getTransform().scale * 100);
        $("#tool_zoom").html(pz_scale + "%");
    });


    var drag_status = false;
    $(document).on('click', '#tool_hand', function () {
        if (drag_status == false) {
            drag_status = true;
            pz.resume();
            $(this).html('<i class="las la-hand-paper la-2x"></i>&nbsp;STOP');
        } else {
            drag_status = false;
            pz.pause();
            $(this).html('<i class="las la-hand-paper la-2x"></i>&nbsp;Pan/Zoom');

        }
    });


    $(document).on('click', '#tool_add', function () {
        var post = '<div class="post-wrapper" style="transform: rotate(2deg);">' + '<div class="post" style="background-color: #fae481;"><h1>drag</h1></div>' + '</div>'
        $('#board').append(post);
        $('.post').draggable({
            drag: function () {
                var offset = $(this).offset();
                var xPos = offset.left;
                var yPos = offset.top;
                $(this).html('x: ' + xPos + '<br/> y: ' + yPos);
            },
            stop: function (event, ui) {}
        });

    });


    $('.post').draggable({
        drag: function () {
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $(this).html('x: ' + xPos + '<br/> y: ' + yPos);
        },
        stop: function (event, ui) {}
    });

See this fiddle for the example. jsfiddle