Scripting and Applications - Web Standards: Mastering HTML5, CSS3, and XML - page 202

function dragDropped(evt) {
var idDrag = evt.dataTransfer.getData("Text");
evt.target.appendChild(document.getElementById(idDrag));
evt.preventDefault();
}
</script>
Finally, declare styles, including the layout and colors for the boxes, in the document head or an external file
(Listing 6-12).
Listing 6-12. The Styles for the Boxes
body {
width: 800px;
margin: 100px auto;
}
#leftDiv, #rightDiv {
float: left;
width: 200px;
height: 100px;
margin: 50px;
background-color: #bbdeee;
border: 1px solid #000;
}
.word {
width: 60px;
height: 20px;
margin: 5px;
text-align: center;
font-weight: bold;
background-color: #ff6;
display: inline-block;
cursor: move;
}
The File API is supported by Firefox 3.6+, IE10+, Safari 6+, Chrome 6.0+, and Opera 11.5+. The Drag & Drop API is
supported by Firefox 3.5+, Chrome 21+, Opera 12+, and IE9+.
The HTML5 Forms API
HTML5 introduced new attributes for the input element ( autocomplete , autofocus , form , formaction , formenctype ,
formmethod , formnovalidate , formtarget , height , list , max , min , multiple , pattern , placeholder , required , step ,
and width ) and new attribute values for the type attribute of the input element (including email , url , number , range ),
search , color , and date pickers ( date , month , week , time , datetime , and datetime-local ), as well as form
validation [11].