How do I make a draggable and resizable rectangle appear on click and disappear on release?

Question

As of now, I have a dynamic graph inside of a rectangle. The rectangle itself is coded like:

<rect width="50%" height="100px" class="graph_rect" style="fill:none;pointer-events:all;" </rect>

Right now, I don't have any JavaScript code that works for this goal. But, I was hoping to create another rectangle on top of "graph_rect" such that:

• When I click on "graph_rect" a this rectangle of width:0 and height:100px appears
• When I drag, that boxes width will always equal the number of pixels away from the initial point
• When I release the mouse, it just disappears

Answer 1

Add an onclick attribute to graph_rect . When graph_rect is clicked, you can then call a function to toggle its visibility .

You can also use the Drag and Drop feature of HTML5 in order to determine when the element is being dragged and adjust the size and position of the element accordingly.

https://www.w3schools.com/css/css_display_visibility.asp https://www.w3schools.com/html/html5_draganddrop.asp