html5 drag and drop - dragging single character of text - possible to see character in cursor as works with image?

I have a chess开发者_Python百科 board. Pieces can be either images or unicode characters.

When dragging images, the cursor shows the image, .e.g, a white knight.

When dragging the character - actually dragging a div in which the character is enclosed since you cannot attach a drag trigger to a text element - the cursor shows a little document instead of the single character inside the div.

This is a problem since I want the user to know what piece he's moving!

Is there any for this to work with fonts likes it works with images?

You can use a div with display:inline while displayed in the text line. It will then behave like a normal span. Once dragged, change to display:block and position:absolute to enable dragging.