Personal tools
You are here: Home Tech Tidbits HTML file of Microdata Deck of Cards

HTML file of Microdata Deck of Cards

Microdata objects and the attribute draggable.

playingcardexample-alt.html — HTML, 14Kb

File contents

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:120px;padding:10px;border:1px solid #aaaaaa;}
#div2 {width:350px;height:120px;padding:10px;border:1px solid #aa0000;}
#deck {width:350px;height:480px;padding:10px;border:1px solid #aa0000; background-color: #dddddd;}
#deck span {color: #dddddd; background-color: #000000;}
[value=hearts] {color: red;}
[value=diamonds] {color: red;}
[value=clubs] {color: black;}
[value=spades] {color: black;}

</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the playing cards with Microdata</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<hr />
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol></div>
<br />

<div id="deck"  ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="aceofhearts" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="H01">Ace of Hearts - </span><span itemprop="suit" value="hearts"> &hearts;A</span> </div>
<div id="twoofhearts" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="H02">Two of Hearts - </span><span itemprop="suit" value="hearts">&hearts;2</span> </div>
<div id="threeofhearts" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="H03">Three of Hearts - </span><span itemprop="suit" value="hearts">&hearts;3</span> </div>
<div id="fourofhearts" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="H04">Four of Hearts - </span><span itemprop="suit" value="hearts">&hearts;4</span> </div>
<div id="fiveofhearts" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="H05">Five of Hearts - </span><span itemprop="suit" value="hearts">&hearts;5</span> </div>
<div id="sixofhearts" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="H06">Six of Hearts - </span><span itemprop="suit" value="hearts">&hearts;6</span> </div>
<div id="sevenofhearts" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="H07">Seven of Hearts - </span><span itemprop="suit" value="hearts">&hearts;7</span> </div>
<div id="eightofhearts" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="H08">Eight of Hearts - </span><span itemprop="suit" value="hearts">&hearts;8</span> </div>
<div id="nineofhearts" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="H09">Nine of Hearts - </span><span itemprop="suit" value="hearts">&hearts;9</span> </div>
<div id="tenofhearts" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="H10">Ten of Hearts - </span><span itemprop="suit" value="hearts">&hearts;10</span> </div>
<div id="jackofhearts" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="H11">Jack of Hearts - </span><span itemprop="suit" value="hearts">&hearts;J</span> </div>
<div id="queenofhearts" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="H12">Queen of Hearts - </span><span itemprop="suit" value="hearts">&hearts;Q</span> </div>
<div id="kingofhearts" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="H13">King of Hearts - </span><span itemprop="suit" value="hearts">&hearts;K</span> </div>
<div id="aceofdiamonds" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="D01">Ace of Diamonds - </span><span itemprop="suit" value="hearts"> &diams;A</span> </div>
<div id="twoofdiamonds" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="D02">Two of Diamonds - </span><span itemprop="suit" value="diamonds">&diams;2</span> </div>
<div id="threeofdiamonds" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="D03">Three of Diamonds - </span><span itemprop="suit" value="diamonds">&diams;3</span> </div>
<div id="fourofdiamonds" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="D04">Four of Diamonds - </span><span itemprop="suit" value="diamonds">&diams;4</span> </div>
<div id="fiveofdiamonds" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="D05">Five of Diamonds - </span><span itemprop="suit" value="diamonds">&diams;5</span> </div>
<div id="sixofdiamonds" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="D06">Six of Diamonds - </span><span itemprop="suit" value="diamonds">&diams;6</span> </div>
<div id="sevenofdiamonds" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="D07">Seven of Diamonds - </span><span itemprop="suit" value="diamonds">&diams;7</span> </div>
<div id="eightofdiamonds" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="D08">Eight of Diamonds - </span><span itemprop="suit" value="diamonds">&diams;8</span> </div>
<div id="nineofdiamonds" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="D09">Nine of Diamonds - </span><span itemprop="suit" value="diamonds">&diams;9</span> </div>
<div id="tenofdiamonds" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="D10">Ten of Diamonds - </span><span itemprop="suit" value="diamonds">&diams;10</span> </div>
<div id="jackofdiamonds" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="D11">Jack of Diamonds - </span><span itemprop="suit" value="diamonds">&diams;J</span> </div>
<div id="queenofdiamonds" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="D12">Queen of Diamonds - </span><span itemprop="suit" value="diamonds">&diams;Q</span> </div>
<div id="kingofdiamonds" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="D13">King of Diamonds - </span><span itemprop="suit" value="diamonds">&diams;K</span> </div>
<div id="aceofclubs" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="C01">Ace of Clubs - </span><span itemprop="suit" value="clubs"> &clubs;A</span> </div>
<div id="twoofclubs" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="C02">Two of Clubs - </span><span itemprop="suit" value="clubs">&clubs;2</span> </div>
<div id="threeofclubs" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="C03">Three of Clubs - </span><span itemprop="suit" value="clubs">&clubs;3</span> </div>
<div id="fourofclubs" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="C04">Four of Clubs - </span><span itemprop="suit" value="clubs">&clubs;4</span> </div>
<div id="fiveofclubs" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="C05">Five of Clubs - </span><span itemprop="suit" value="clubs">&clubs;5</span> </div>
<div id="sixofclubs" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="C06">Six of Clubs - </span><span itemprop="suit" value="clubs">&clubs;6</span> </div>
<div id="sevenofclubs" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="C07">Seven of Clubs - </span><span itemprop="suit" value="clubs">&clubs;7</span> </div>
<div id="eightofclubs" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="C08">Eight of Clubs - </span><span itemprop="suit" value="clubs">&clubs;8</span> </div>
<div id="nineofclubs" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="C09">Nine of Clubs - </span><span itemprop="suit" value="clubs">&clubs;9</span> </div>
<div id="tenofclubs" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="C10">Ten of Clubs - </span><span itemprop="suit" value="clubs">&clubs;10</span> </div>
<div id="jackofclubs" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="C11">Jack of Clubs - </span><span itemprop="suit" value="clubs">&clubs;J</span> </div>
<div id="queenofclubs" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="C12">Queen of Clubs - </span><span itemprop="suit" value="clubs">&clubs;Q</span> </div>
<div id="kingofclubs" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="C13">King of Clubs - </span><span itemprop="suit" value="clubs">&clubs;K</span> </div>
<div id="aceofspades" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="S01">Ace of Spades - </span><span itemprop="suit" value="spades"> &spades;A</span> </div>
<div id="twoofspades" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="S02">Two of Spades - </span><span itemprop="suit" value="spades">&spades;2</span> </div>
<div id="threeofspades" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="S03">Three of Spades - </span><span itemprop="suit" value="spades">&spades;3</span> </div>
<div id="fourofspades" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="S04">Four of Spades - </span><span itemprop="suit" value="spades">&spades;4</span> </div>
<div id="fiveofspades" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="S05">Five of Spades - </span><span itemprop="suit" value="spades">&spades;5</span> </div>
<div id="sixofspades" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="S06">Six of Spades - </span><span itemprop="suit" value="spades">&spades;6</span> </div>
<div id="sevenofspades" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="S07">Seven of Spades - </span><span itemprop="suit" value="spades">&spades;7</span> </div>
<div id="eightofspades" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="S08">Eight of Spades - </span><span itemprop="suit" value="spades">&spades;8</span> </div>
<div id="nineofspades" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="S09">Nine of Spades - </span><span itemprop="suit" value="spades">&spades;9</span> </div>
<div id="tenofspades" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="S10">Ten of Spades - </span><span itemprop="suit" value="spades">&spades;10</span> </div>
<div id="jackofspades" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="S11">Jack of Spades - </span><span itemprop="suit" value="spades">&spades;J</span> </div>
<div id="queenofspades" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="S12">Queen of Spades - </span><span itemprop="suit" value="spades">&spades;Q</span> </div>
<div id="kingofspades" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="S13">King of Spades - </span><span itemprop="suit" value="spades">&spades;K</span> </div>
<div id="redjoker" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="wild">Joker - Wild</span> </div>
<div id="blackjoker" draggable="true" ondragstart="drag(event)" itemscope="true" itemtype="http://playingcards.org/standard54/">
<span itemprop="card" value="wild">Joker - Wild</span> </div>
</div>
</body>
</html>
Document Actions
What's News