Drag and drop within a text

Is it possible to drop html element into a text at mouse pointer position, using JQuery?

I've been implementing song text editor (yet another...) with drag-and-drop guitar chord positioning. I would click a chord, drag it and drop between lyrics letters. Lyrics are contentEditable div.

My quick solution was surrounding each letter with a <span class="letter"> tag and make entire song (letters + chords) sortable. Sortable has cancel attribute for span.letter, so you cannot move letters :-). But it implies maintaining this text structure while editing lyrics and seems not to be so efficient.

Can I achieve this in a 开发者_开发知识库more simple way, particularily without surrounding each letter with a tag?

---

You might want to try this with sliders, one for each note.