私は次のものを作成しようとしています:
単純な HTML を含むコンテンツ編集可能な div。たとえば、次のようになります。
<div contenteditable="true">
<p>This is a paragraph of <b>bold</b> <span class="draggable" draggable="true" contenteditable="false">text</span></p>
<p>This is another para<br />graph</p>
</div>
私の目標は、ユーザーが div の内容を編集できるようにすることですが、個々の.draggable
スパンは編集できないようにすることです。代わりに、好きな場所にドラッグアンドドロップできるようにする必要がありますが、ドラッグ中にカーソル/キャレットが単語間のスペースにスナップするようにしたいので、ユーザーはspan
単語内ではなく単語間のみをドロップできます.
理想的には、ユーザーspan
が .
私の主な質問は、要素をドラッグしているときに、単語の間にキャレット (点滅カーソル) をスナップ/配置するにはどうすればよいspan
ですか? このソリューションが最新のすべてのブラウザーで動作する必要があり、可能であれば IE8 以降でも動作する必要があります。
私の2番目の質問は、ドロップした後に常にスペースがあることを確認するにはどうすればよいですか?span