时间戳

首页 > 解决方案 > 使用可拖动元素平移和缩放 div 容器

jquery - 使用可拖动元素平移和缩放 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);
        },
        stop: function (event, ui) {}
    });

有关示例，请参见此小提琴。 jsfiddle

标签： jquerydrag-and-droppanzoom

解决方案

推荐阅读