Microdata, Draggable and CSS: Hide and Peek

When dragging an HTML element that has an itemscope, you are dragging all of the nested elements and content. As the Javascript and HTML5 allows the HTML to be changed in the generated HTML that the browser is using, CSS rules apply to the changed HTML.

In one example, the Microdata item/object has both a text <span> and an <img>. But you only want the text to appear on the page in one section as text, but in another you want it to appear as an image, you would create the CSS classes to set a <div> as hiding images (CSS div.hideimage img {display: hidden} and the other <div> as hiding the text (CSS div.hidetext span {display: hidden}

As you drag a Microdata item back and forth, the item will appear as text in the text only <div> and as an image in the image only <div>

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