如何使可拖动且可调整大小的矩形在单击时出现并在释放时消失？答案

【问题标题】：How do I make a draggable and resizable rectangle appear on click and disappear on release?如何使可拖动且可调整大小的矩形在单击时出现并在释放时消失？
【发布时间】：2017-06-14 07:20:03
【问题描述】：

到目前为止，我在一个矩形内有一个动态图。矩形本身的编码如下：

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

目前，我没有任何适用于此目标的 JavaScript 代码。但是，我希望在“graph_rect”之上创建另一个矩形，这样：

当我点击“graph_rect”时，会出现一个宽度：0、高度：100px 的矩形
当我拖动时，框的宽度将始终等于距初始点的像素数
当我松开鼠标时，它就消失了

【问题讨论】：

不太确定你想要什么，但起点可能是resize 属性或jquery 的resizable
我认为他想要的是一条从鼠标到矩形的线。有点难以解释，但很容易想象。 Like this。编辑：nvm 我想我看错了。

标签： javascript jquery html css jquery-ui

【解决方案1】：

将onclick 属性添加到graph_rect。当graph_rect被点击时，你可以调用一个函数来切换它的visibility。

您还可以使用 HTML5 的拖放功能来确定元素何时被拖动并相应地调整元素的大小和位置。

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

【讨论】：