Why can't I drag the span, but instead of img?

Question

I am trying to create a text box where I can add HTML elements that need to be dragged at the character level. This question is related to the other that I am currently asking , but it is related to the GWT. To create such a text area, I am trying to figure out how to do this step by step. This is what I got so far:

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> 

But for some reason I can only drag img . Actually I need to drag a span or even a better div ..

How can i do this?

PS: Please do not use jQuery if possible.

Answer 1

I did a bit of work to see how HTML5 drag and drop works, and I found that in order to get the drag and drop DOM element, you need to add a new “draggable” attribute to it and set it to true. The confusing part of your problem is that images and links are dragged by default !

I have not been able to test this well because your script throws an error saying that your smartdrag function smartdrag not exist.

Although I really hope for this possible solution, since it completely covers your problem and comes from reliable documentation.