Imagine I have a graph with some large rectangles on it. I want to drag a circle from the stencil and only allow it to be dropped within a preexisting rectangle. Furthermore, as the user drags the circle around the graph (deciding where to drop it) and the circle enters a rectangle, I want to change the colour of the rectangle.
Basically, circles are only allowed in rectangles and I'd like to highlight the rectangle before the user drops the circle.
Is this possible with jointjs or rappid?
It is possible. There is even a small, well-hidden demo on the JointJS website about exactly this. (https://resources.jointjs.com/docs/jointjs/v2.1/demo/shapes/shapes.devs.html)
You just have to fiddle around with the Paper options:
Set
embeddingMode: true
if you haven't already, and add the embedding class to the highlights like so (obviously, define some styling in your css for this class):Finally, implement
validateEmbedding: function(childView, parentView) {}
with your own custom rules.