Microdata and Draggable: How to Drag an Item with Images

Microdata used for items/objects on a web page can include nested tags. Draggable is the new HTML5 attribute that specifies whether an HTML element can be easily dragged or not.

However, images <img /> and some other tags are by default draggable. For this reason if you have an item/object set by the itemscope attribute with multiple nested tags (e.g. <span> and <img>), then the cursor can drag the whole itemscoped element only by dragging from a part that is not by default draggable. So dragging an image that is contained within the item, the item can not be dragged.

To make the item draggable by dragging the image, you must add to the attributes to <img>:
draggable="false".

In my playing cards example:

    <div id="aceofhearts" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="H01" class="textual">Ace of Hearts - </span><span itemprop="suit" value="hearts" class="textual"> &hearts;A</span> 
 <img alt="Ace of Hearts" draggable="false" itemprop="image" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Playing_card_heart_A.svg/40px-Playing_card_heart_A.svg.png" /></div>

Resources:
http://www.w3schools.com/html/html5_draganddrop.asp
http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html#microdata