私が望むのは、Webページに複数のテキスト要素(spanまたはp要素など)を表示し、それらをダブルクリックすると、input要素に変換してそのテキストを変更できることです。
各要素はドラッグ可能である必要があるため、要素をダブルクリックするinputと、テキスト要素と同じ場所に要素を作成する必要があります。
これを行う最善の方法は何ですか？中canvas？私が読んだことから、キャンバス内に HTML 要素を含めることはできません。
PS: 私は HTML5draggableプロパティを認識しており、既にテストに使用しています。JQueryUI についても同じなので、問題は DnD に関するものではなく、ドラッグ可能な要素の位置を記録するための最良の方法です。
テキスト要素をキャンバスにドラッグするには、フレームワークを使用することをお勧めします（cgSceneGraphとして）。
キャンバス要素内で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";