User Interaction and the HTML5 APIs - HTML5 Mastery: Semantics, Standards, and Styling - page 324

}
…

Now when you test the drag-and-drop operation, you should see an entry for "drop"
in the JavaScript console. For the last edit, we'll assign the text of the "drop target" to the
text in the payload in the dataTransfer object. We'll use the innerHTML property
to set the content inside the drop target. Edit the script to make this change:
…
function dropHandler(e) {
console.log("drop");
droptarget.innerHTML

=

e.dataTransfer.getData("text/plain");
}
…

The getData() method is used to retrieve the contents of the payload set in the
dragStartHandler() function, which then assigns that value to the contents of the
drop target. Test the page again, and you should see that when you drop the “Draggable”
text onto the “Drop Target” text it changes to “Payload Landed.”
OK, let's make this a little bit more user friendly. We're going to add a CSS class that
creates a dashed black border that we'll make appear and disappear when over the drop
target. We'll also add a default border to the h1 s that blends into the background so the
elements don't shift when the dashed border is added. Edit styles.css , adding the
following two rules:
h1 {

border:1px solid #cccccc;

}

.over {
border:1px dashed #000000;

}

Now we'll add the over class when the drag is over the drop target by setting the
className property on the drop target. Edit the dragOverHandler() function in
script.js to add the class name:
…
function dragOverHandler(e) {
console.log("dragover");
droptarget.className = "over";