Ich versuche, ein Textfeld zu erstellen, in dem ich HTML-Elemente hinzufügen kann, die auf Zeichenebene verschoben werden können sollen. Diese Frage steht im Zusammenhang mitzu einem anderen frage ich gerade aber das hat mit GWT zu tun. Um einen solchen Textbereich zu erstellen, versuche ich, Schritt für Schritt zu verstehen, wie das geht. Das habe ich bisher:

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>

Aber aus irgendeinem Grund kann ich nur das @ ziehimg. Was ich eigentlich brauche, ist in der Lage zu sein, ein @ zu ziehspan oder noch besser eindiv ..

Wie kann ich das erreichen?

PS: Bitte keine jQuery wenn möglich.