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

我想要的是在网页上显示多个文本元素（例如

span

或

p

元素），当我双击它们时，我可以将其转换为

input

元素并更改其文本

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

input

元素

在

画布中执行此操作的最佳方法是什么？？据我所知，在画布中不可能有HTML元素

PS：我知道HTML5
draggable
属性，并已将其用于测试。JQueryUI也是如此，所以问题不在于DnD，它只是记录可拖动元素位置的最佳方法。
要将文本元素拖动到画布中，最好使用框架（as）

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

在中，我使用相同的技巧“在”画布中显示和操作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";

从我所读到的来看，它似乎也是一个很好的框架！（从您的链接到其网站）。我会尝试选择一个最适合我需要的，谢谢。我正在尝试cgSceneGraph，很好。我有两个问题：在拖动节点时是否可以删除粉色边框？如何在textNode上绑定
dblclick
事件？通过扩展类？是，您可以使用CGSGNode的以下4个属性修改所选边界框的行为：
selectionHandleColor
、
selectionHandleSize
、
selectionLineColor
和
selectionLineWidth
。v2还将包括一个代理渲染方法，用于绘制任何您想要的东西，而不是正方形。从CGSGNode获取inherid中的每个节点，从而从中获取所有事件和属性。双击事件（也可用作双击，它不是由移动浏览器本机管理的）被称为任何其他事件：myTextNode.onDblClick=function（event）{//event.node.xxx；}`我建议你看一看这本书。扩展CGSGNode的唯一原因是创建自己的渲染方法。这是一件好事：cgsceegraph是一个基于插件的框架，已经提供了几个扩展。我还建议您创建一个新问题，让我更深入地解释如何操作事件、属性和自定义节点。希望有帮助：）我们最终决定在我们的项目中使用cgsceegraph而不是KineticJS。非常好的框架，谢谢！