Below is the example of graph representation by jointjs. I am facing an issue like; there is any way to stop dragging element/node only till the div border. I mean, element/node should not go inside the div. It should stop at the border of div As you can see in second image; elements/nodes can drag inside the div.
Actual Result
Result after dragging element/node
Here is the paper div code:
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 3000,
height: 3000,
gridSize: 1,
model: graph,
perpendicularLinks: true
});
Element Creation Code:
return new joint.shapes.basic.Rect({
id: node.id.toString(),
size: { width: width, height: height },
attrs: {
text: {
text: finalNameNode,
'font-size': letterSize,
'font-family': 'Inspira',
'x-alignment': 'middle',
fill:'white'},
rect: {
width: width, height: height,
rx: 5, ry: 5,
stroke: '#555',
fill: '#026cb6'
}
}
});
Please suggest what I have to do the same. Should I have to set something in paper div or I have to add something in element.