html - 如何在画布内显示可拖动的文本元素？

Question

我想要的是在网页上显示多个文本元素（例如span或p元素），当我双击它们时，我可以将它变成一个input元素并更改其文本。

每个元素都必须是可拖动的，因此当我双击一个元素时，我必须input在文本元素所在的同一位置创建该元素。

做这个的最好方式是什么？里面一个canvas？从我读过的内容来看，画布内不可能有 HTML 元素。

PS：我知道 HTML5draggable属性并已将其用于测试。JQueryUI 也一样，所以问题不在于 DnD，它只是记录可拖动元素位置的最佳方式。

Answer 1

要将文本元素拖到画布中，最好使用框架（如cgSceneGraph）。

您不能在 canvas 元素中使用 HTML 元素，但您可以通过在用户单击文本时创建文本输入字段来模拟这种行为，并将文本输入添加到与文本相同的位置。

在cgSceneGraph中，我使用相同的技巧在画布“内部”显示和操作 Web 视图（但使用 iFrame 而不是文本输入）。

这是开始的代码：

this._textInput = document.createElement("INPUT");
this._textInput .style.position = "absolute";
document.body.appendChild(this._textInput);

this._textInput.style.left = this.getAbsoluteLeft() + "px";
this._textInput.style.top = this.getAbsoluteTop( + "px";
this._textInput.style.width = this.getAbsoluteWidth() + "px";
this._textInput.style.height = this.getAbsoluteHeight() + "px";