如何使可拖動且可調整大小的矩形在單擊時顯示，在釋放時消失？

Question

到目前為止，我在矩形內部有一個動態圖。 矩形本身的編碼如下：

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

目前，我沒有任何實現此目標的JavaScript代碼。 但是，我希望在“ graph_rect”的頂部創建另一個矩形，以便：

• 當我單擊“ graph_rect”時，會出現一個寬度為0高度為100px的矩形
• 當我拖動時，該框的寬度將始終等於距初始點的像素數
• 當我釋放鼠標時，它消失了

Answer 1

向graph_rect添加一個onclick屬性。 單擊graph_rect ，您可以調用一個函數以切換其visibility 。

您還可以使用HTML5的拖放功能來確定何時拖動元素，並相應地調整元素的大小和位置。

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