011.html (4381B)
1 <!DOCTYPE html> 2 <title>drag & drop - microdata for selection partially intersecting multiple items</title> 3 <style> 4 body > div { 5 height: 100px; 6 width: 200px; 7 background-color: fuchsia; 8 position: absolute; 9 top: 8px; 10 left: 8px; 11 } 12 span * { 13 display: none; 14 } 15 body > div + div { 16 background-color: navy; 17 top: 116px; 18 } 19 body > div + div + div { 20 background-color: orange; 21 top: 224px; 22 } 23 p:first-of-type { 24 margin-top: 350px; 25 } 26 </style> 27 28 <script> 29 30 function makeEl(eltype,props,contents) { 31 var elem = document.createElement(eltype); 32 for( var i in props ) { 33 if( props.hasOwnProperty(i) ) { 34 elem.setAttribute(i,props[i]); 35 } 36 } 37 if( contents ) { 38 elem.innerHTML = contents; 39 } 40 return elem; 41 } 42 43 var orange, fails = [], doneonce = false; 44 window.onload = function() { 45 orange = document.getElementsByTagName('div')[2]; 46 orange.childNodes[1].appendChild( makeEl('span',{itemprop:'foo'},'test') ); 47 orange.childNodes[3].appendChild( makeEl('span',{itemprop:'bar'},'test') ); 48 orange.ondragstart = function(e) { 49 e.dataTransfer.effectAllowed = 'copy'; 50 e.dataTransfer.setData('Text', 'dummy text'); 51 var err; 52 if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { 53 fails[fails.length] = e.type + ' ' + err; 54 } 55 }; 56 orange.previousSibling.ondragenter = orange.previousSibling.ondragleave = orange.previousSibling.ondragover = 57 orange.ondrag = orange.ondragend = function(e) { 58 if( e.type == 'dragover' || e.type == 'dragenter' ) { 59 e.preventDefault(); 60 e.dataTransfer.dropEffect = 'copy'; 61 } 62 if( e.dataTransfer.getData('application/microdata+json') ) { 63 fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; 64 } 65 }; 66 orange.previousSibling.ondrop = function(e) { 67 var err; 68 if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { 69 fails[fails.length] = e.type + ' ' + err; 70 } 71 if( e.type != 'drop' ) { return; } 72 if( doneonce ) { return; } 73 doneonce = true; 74 setTimeout(function () { 75 document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; 76 fails = []; 77 }, 200 ); 78 }; 79 80 }; 81 function checkprops(md) { 82 // http://dev.w3.org/html5/spec/dnd.html#list-of-dragged-nodes 83 //"If it is a selection that is being dragged, then the list of dragged nodes contains, in tree order, every node that is partially or completely included in the selection (including all their ancestors)." 84 //given this "ancestors" situation, what is to stop every item in the body from being included? oversight perhaps? tests 18-20 cover this more extensively 85 var i; 86 if( !md ) { return 'no microdata'; } 87 md = JSON.parse(md); 88 if( !md.items ) { return 'no items'; } 89 if( md.items.length != 2 ) { return md.items.length+' items instead of 2'; } 90 if( !md.items[0].properties ) { return 'no items[0].properties'; } 91 if( !md.items[0].properties.foo ) { return 'no items[0].properties.foo'; } 92 if( md.items[0].properties.foo.length != 1 ) { return 'items[0].properties.foo length '+md.items[0].properties.foo.length+' instead of 1'; } 93 if( md.items[0].properties.foo[0] != orange.childNodes[1].properties.namedItem('foo').getValues()[0] ) { return 'items[0].properties.foo[0] <i>'+md.items[0].properties.foo[0]+'</i> instead of <i>'+orange.childNodes[1].properties.namedItem('foo').getValues()[0]+'</i>'; } 94 if( !md.items[1].properties ) { return 'no items[1].properties'; } 95 if( !md.items[1].properties.bar ) { return 'no items[1].properties.bar'; } 96 if( md.items[1].properties.bar.length != 1 ) { return 'items[1].properties.bar length '+md.items[1].properties.bar.length+' instead of 1'; } 97 if( md.items[1].properties.bar[0] != orange.childNodes[1].properties.namedItem('foo').getValues()[0] ) { return 'items[1].properties.bar[0] <i>'+md.items[1].properties.bar[0]+'</i> instead of <i>'+orange.childNodes[1].properties.namedItem('foo').getValues()[0]+'</i>'; } 98 return ''; 99 } 100 101 </script> 102 103 <div></div><div></div><div>01<span itemscope>23</span>45<span itemscope>67</span>89</div> 104 105 <p>Use your pointing device to select the text substring "3456" above, drag the selection upwards to the pink box, 106 then back to the blue box, and release it.</p> 107 <noscript><p>Enable JavaScript and reload</p></noscript>