2

I am looking to create the following:

Contenteditable div, that has simple HTML in it, for example:

<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>

My goal is for the user to be able to edit the contents of the div, but not the individual .draggable spans. Instead, they should be able to drag and drop them to where they like - but I would also like that while dragging, the cursor/caret would snap to spaces between words - so that the user can only drop the span between words, not inside them.

Ideally, once the user drops the span, it would be placed exactly between words, ie, there should be 1 space before and after it (and the spaces from its previous position should be removed).

My main question is, how can I snap/position the caret (blinking cursor) between the words while dragging the span elements? I need this solution to work in all modern browsers and if possible, also IE8 and up.

My secondary question is how can I ensure that there is always a space before and after the span after dropping it?

ragulka
  • 4,312
  • 7
  • 48
  • 73
  • And the question is...? – Teemu Jun 10 '13 at 09:54
  • @Teemu I updated my post with clearer questions. – ragulka Jun 10 '13 at 19:17
  • I'd suggest you to forget IE8, practically you'd need to create a different application for it. Eventhandling and especially text selectionhandling model in older IEs differ totally from modern browsers. What comes to the programming details, earned that rep you have, you very well know, how SO works... – Teemu Jun 11 '13 at 04:49
  • Have a look on this question - http://stackoverflow.com/questions/16900032/html5-draggable-elements-within-contenteditable-div-stops-working-after-first There's an example that can help you. – Reinmar Jun 11 '13 at 07:33

0 Answers0