Making an element follow another?


#1

I’m wondering if it’s possible to have elements or groups of elements follow other elements that are being dragged other than by grouping.

In the example I would like to be able to drag the ellipse and use the controls to change shape and size and then hide the controls. I have managed that far (although the controls can still be manipulated while their opacity is set to 0 - I would like to fix that if possible) but I would really like to have the controls follow the item so that if further manipulation is required after further movement, the controls could be shown just under the object at it’s new location.

I found that I could only get the “following” movement I wanted by grouping the controls with the ellipse but then the mouse click to show/hide the controls overrode the ability of the controls to be manipulated.
Thanks, muzz.

Rotate_Size.zip (17.7 KB)


(Mark Hunte) #2

You can do both with some JS.

First for the toggle we can use style.display attribute and a [ternary operator] (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)

The follow we just match the top and left of the circle (+ some pixels to keep it below ).

To do this we set up an MutationObserver to watch for changes to the circle. The MutationObserver will call a callback function that makes the changes.

The MutationObserver is a scatter gun in how it detects the changes but in this case that does not matter.
See this thread for a little bit more on uses for the Observer and also MutationObserver

This is just a quick example for you to refine…

Rotate_Size_v2.hype.zip (28.9 KB)


#3

Thanks so much Mark. I won’t pretend I understand it but for now being able to deconstruct and reconstruct it is great. I have bookmarked the links for Javascript tutorials from the forums and will start to make my way through them.

Yours (and everyone’s) help here is much appreciated.