stop dragging element beyond the paper div

149 views Asked by At

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.

enter image description here Actual Result

enter image description here 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.

0

There are 0 answers