Drag and drop within a text

Question

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?

Answer 1

您可能要尝试使用滑块，每个音符一个。