Question

如果纸张太大而无法显示，我想让纸张可以拖动。

我试过空白的文章：指针和指针事件，但是不能只跟随鼠标移动。我也试图通过jquery使文件的元素可拖动，但似乎没有什么可以做的...

有没有办法做到这一点？

Answer 1

我知道这是一个稍微陈旧的线程，但我坚持了一段时间，并使用SVG平移和缩放库遇到了一个简洁的解决方案。 Git hub link here

编辑 - 我在这里创建了以下步骤的插件（加上一些额外内容）： SVG panning with Jointjs

创建纸张后的第一步是初始化SVG平移和缩放：

class EventAdmin(admin.ModelAdmin):

list_display = ('title', 'start', 'contact_time', 'user', 'fin', 'frequency', 'one_file_',)

fieldsets = (
    (None, {
        'fields': ('title','start', 'contact_time', 'is_cancelled', 'calendar', 'user', 'description', ('frequency', 'fin' ), 'activated', 'one_file',)
    }),
)

其中targetElement是jointjs论文进入的div。 Jointjs将在其中创建一个SVG元素（因此是childNodes [0]），并且在该元素内，第一个元素是视口标记（因此viewportselector中的childNodes [0] .childNodes [0]）。在这个阶段，pan被禁用，因为在我的用例中，它会与纸上的拖放元素相关。相反，我所做的是保持对panAndZoom对象的引用，然后在空白处开启和关闭平移：指针向下和空白：指针事件：

    panAndZoom = svgPanZoom(targetElement.childNodes[0], 
        {
            viewportSelector: targetElement.childNodes[0].childNodes[0],
            fit: false,
            zoomScaleSensitivity: 0.4,
            panEnabled: false
        });

}）;

我想是解决问题的另一种方法，但我发现它更容易一些，而且它也可以让你变焦，你可以调整灵敏度等。

Answer 2

这可以通过JointJS事件和文档事件的组合来实现。图表显示封装在div：

中

<div id='diagram'></div>

然后为JointJS添加事件处理程序，首先是我们存储拖动开始位置的pointerdown事件：

paper.on('blank:pointerdown',
    function(event, x, y) {
        dragStartPosition = { x: x, y: y};
    }
);

然后当我们删除我们存储位置的变量时拖动（指针）结束（它也作为一个标志，是否有正在进行的活动拖动）：

paper.on('cell:pointerup blank:pointerup', function(cellView, x, y) {
    delete dragStartPosition;
});

由于JointJS没有公开“纸张指针移动”事件，我们需要使用mousemove文档事件。例如，使用JQuery：

$("#diagram")
    .mousemove(function(event) {
        if (dragStartPosition)
            paper.translate(
                event.offsetX - dragStartPosition.x, 
                event.offsetY - dragStartPosition.y);
    });

我们获取拖动起始坐标和当前指针位置，并使用paper.translate()调用更新纸张位置。

警告：如果您缩放纸张（使用paper.scale()），您还必须缩放拖动的起始位置：

var scale = V(paper.viewport).scale();
dragStartPosition = { x: x * scale.sx, y: y * scale.sy};

对paper.translate()的调用将更新到正确的位置。

Answer 3

我建议如下：

注册将启动纸张拖动的纸张blank:pointerdown event的处理程序（存储您将在mousemove处理程序中使用的标记，以识别纸张处于“平移”状态）。
将大纸张放入带有<div>的{{1}}容器中。这个overflow: auto将成为大纸张的小窗口。
为文档正文<div>事件注册处理程序（因为即使鼠标光标离开纸张区域，您也很可能希望拖动纸张？）。在此处理程序中，您将设置mousemove容器的scrollLeft和scrollTop属性，使文件“平移”。要调整<div>和scrollLeft属性，您将使用事件对象的scrollTop和clientX属性以及先前存储在{{clientY中的相同属性。 1}}处理程序。（换句话说，你需要找到那些从上一个blank:pointerdown / mousemove找到平移的偏移量。）
注册文档正文鼠标的处理程序，并在此处理程序中，清除您在步骤1中设置的纸张拖动标记。

如何使纸张可拖动

3 个答案: