JointJS 拖动画布

效果

画布外套一层画板和一层画框，拖动画布时让画板在画框中滚动

源码

<div id="wrap" style="overflow: auto;height:300px;width:300px;background-color: darkgrey">
    <div id="board" style="padding:20px">
        <div id="paper"></div>
    </div>
</div>
<script>
	const paper = new joint.dia.Paper({...});
    ...
    const $PAPER = $("#paper"), $WRAP = $("#wrap");
    $PAPER.css('cursor', 'grab');
    // 通过jointjs点击事件绑定/解绑wrap的鼠标移动事件
    paper.on('blank:pointerdown', function (evt, x, y) {
        const originX = evt.offsetX,
            originY = evt.offsetY;
        $PAPER.css('cursor', 'grabbing');
        $WRAP.on('mousemove', function (evt) {
            let scrollLeft = $WRAP.scrollLeft() - (evt.offsetX - originX);
            let scrollTop = $WRAP.scrollTop() - (evt.offsetY - originY);
            scrollLeft = 0 > scrollLeft ? 0 : scrollLeft;
            scrollTop = 0 > scrollTop ? 0 : scrollTop;
            $WRAP.scrollLeft(scrollLeft).scrollTop(scrollTop);
        });
    });
    paper.on('blank:pointerup', function (evt, x, y) {
        $PAPER.css('cursor', 'grab');
        $WRAP.off('mousemove');
    });
</script>