Java Reference
In-Depth Information
The last new/changed line is in the
dragDropHandler()
function. Instead of displaying an arbitrary
string value in the status element when the
drop
event fires, you retrieve the data from the
dataTransfer
object by using the
getData()
method:
dropStatus.innerHTML = e.dataTransfer.getData("text");
The
getData()
method accepts only one argument: the data type you used when calling
setData()
.
Therefore, this code retrieves the value of
Drag and Drop!
and uses it as the inner HTML of the
status element.
Full Drag and Drop
trY it out
In this Try It Out, you apply everything you've learned about native drag and drop and write a page
that lets you drag and drop elements between two drop targets.
Open your text editor and type the following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 10: Example 21</title>
<style>
[data-drop-target] {
height: 400px;
width: 200px;
margin: 2px;
background-color: gainsboro;
float: left;
}
.drag-enter {
border: 2px dashed #000;
}
.box {
width: 200px;
height: 200px;
}
.navy {
background-color: navy;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<div data-drop-target="true">
<div id="box1" draggable="true" class="box navy"></div>
<div id="box2" draggable="true" class="box red"></div>
</div>
