具有可拖动元素的平移和缩放 div 容器

如何解决具有可拖动元素的平移和缩放 div 容器

我正在尝试创建一个虚拟的便利贴板，您可以在其中添加注释、拖动它等。我还希望能够放大和缩小板并平移。我已经完成了大部分工作，但是当我执行平移/缩放操作（使用我找到的库）时，可拖动元素无法拖动到原始视图之外，并且拖动会执行一些奇怪的操作。

我不知道为什么卡住了，我是否必须扩大电路板的尺寸？

这是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);
        },ui) {}
    });

请参阅此小提琴示例。 jsfiddle