7

如果纸张对于它显示的 div 来说太大了，我想让纸张可拖动。

我尝试了空白文件：pointerdown 和 pointerup 事件，但无法仅跟随鼠标移动。我还尝试通过 jquery 使纸张的元素可拖动，但似乎没有任何效果......

有没有办法做到这一点？

4

3 回答 3

26

这可以通过 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 没有暴露“纸指针移动”事件，我们需要使用mousemovedocument 事件。例如，使用 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()将更新到正确的位置。

于 2016-03-22T10:22:34.960 回答
13

我知道这是一个稍微旧的线程，但我被这个问题困扰了一段时间，并使用 SVG Pan and Zoom 库找到了一个简洁的解决方案。Git 中心链接在这里

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

创建论文后的第一步是初始化 SVG Pan 和 Zoom：

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

其中targetElement是jointjs论文进入的div。Jointjs 将在其中创建一个 SVG 元素（因此是 childNodes[0]），并且在该元素中，第一个元素是视口标签（因此是 viewportselector 中的 childNodes[0].childNodes[0]）。在这个阶段 pan 被禁用，因为在我的用例中它会干扰纸上的拖放元素。相反，我所做的是保留对 panAndZoom 对象的引用，然后在 blank:pointerdown 和 blank:pointerup 事件上打开和关闭平移：

paper.on('blank:pointerdown', function (evt, x, y) {
        panAndZoom.enablePan();
    });
paper.on('cell:pointerup blank:pointerup', function(cellView, event) {
            panAndZoom.disablePan();

});

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

于 2016-02-02T09:11:06.607 回答
5

我建议如下：

  1. 为将启动纸张拖动的纸张注册一个处理程序blank:pointerdown event（存储一个标志，您将在mousemove处理程序中使用它来识别纸张处于“平移”状态）。
  2. 将大纸放入<div>带有 CSS 的容器中overflow: auto。这<div>将是您通向大纸的小窗口。
  3. 为文档正文事件注册一个处理程序mousemove（因为您很可能希望即使鼠标光标离开纸张区域也能拖动纸张？）。在此处理程序中，您将设置容器的scrollLeft和scrollTop属性，<div>使纸张“平移”。为了调整scrollLeft和scrollTop属性，您将使用事件对象的clientX和clientY属性以及之前存储在blank:pointerdown处理程序中的相同属性。（换句话说，您需要那些从最后一个mousemove/中找到平移的偏移量blank:pointerdown）。
  4. 为文档主体 mouseup 注册一个处理程序，并在此处理程序中清除您在步骤 1 中设置的纸张拖动标志。
于 2015-02-11T10:16:53.220 回答