Estou tentando criar uma área de texto onde eu possa adicionar elementos HTML que devem ser arrastáveis no nível do caractere. Esta questão está relacionadapara outro que eu estou perguntando atualmente mas isso está relacionado ao GWT. Para criar uma área de texto, estou tentando entender como fazê-lo passo a passo. Isto é o que eu tenho até agora:

JSFiddle

JavaScript:

function smartdrag(e) {

    var id = e.target.getAttribute('id');

    if (id!=='plzdragme' && id !== 'plzdragmeimg') {
        e.stopPropagation();
        e.preventDefault();
        return;
    }
}

HTML:

<div contenteditable="true" ondragstart="smartdrag(event)">
    More blah
    <img src="http://lorempizza.com/80/80/2" id="plzdragmeimg" draggable="true" class="fancy-img"/>
    about 
    <span id="plzdragme" contenteditable="false" class="fancy" draggable="true">DRAGME</span>
    Sparta!
</div>

Mas, por alguma razão, só posso arrastar oimg. O que eu realmente preciso é ser capaz de arrastar umspan ou melhor aindadiv..

Como posso conseguir isso?

PS: Por favor, não jQuery, se possível.