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

Question

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

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

这样做的最佳方法是什么？在canvas内？根据我的阅读，不可能在画布中包含HTML元素。

PS：我知道HTML5 draggable属性，并已将其用于测试。对于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";