我正在使用jointjs制作用户可编辑的图表.用户可以拖动它们并重新定位每个单元格.但是,当一个单元格被拖到边缘时,它会溢出并被切断.我希望防止这种情况发生,而不是单元格在到达纸张边缘之前停止而不允许越过边缘,因此总是完全保留在纸张内.这个行为可以在jointjs自己的演示中看到：

http://www.jointjs.com/tutorial/ports

尝试将单元格拖动到边缘,您将看到它最终在穿过纸张元素的边缘时变得隐藏.

其次,我使用插件进行有向图布局,在这里找到：

http://jointjs.com/rappid/docs/layout/directedGraph

如您所见,只要您的点击布局,树位置就会自动移动到纸张元素的左上角.如何修改这些默认位置？我看到的所提供函数的唯一选项是行之间的空间和节点之间的空间,没有初始位置.假设我想在点击“布局”时将树显示在纸张中间,我将在哪里进行更改？在此先感谢您的帮助.

解决方法:

我认为我以前的答案仍然可行,但这就是我在项目中实现的方法.它比其他答案有一个优势,因为它不需要你使用自定义的elementView,看起来更简单(对我来说).

(Working jsfiddle：http://jsfiddle.net/pL68gs2m/2/)

在纸上,处理cell：pointermove事件.在事件处理程序中,计算触发事件的cellView的边界框,并使用它来约束移动.

var graph = new joint.dia.Graph;

var width = 400;
var height = 400;
var gridSize = 1;

var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: width,
    height: height,
    model: graph,
    gridSize: gridSize
});

paper.on('cell:pointermove', function (cellView, evt, x, y) {

    var bbox = cellView.getBBox();
    var constrained = false;

    var constrainedX = x;

    if (bbox.x <= 0) { constrainedX = x + gridSize; constrained = true }
    if (bbox.x + bbox.width >= width) { constrainedX = x - gridSize; constrained = true }

    var constrainedY = y;

    if (bbox.y <= 0) {  constrainedY = y + gridSize; constrained = true }
    if (bbox.y + bbox.height >= height) { constrainedY = y - gridSize; constrained = true }

    //if you fire the event all the time you get a stack overflow
    if (constrained) { cellView.pointermove(evt, constrainedX, constrainedY) }
});