Java Reference
In-Depth Information
It's really no wonder why developers embraced JSON. It's easy to work with!
JSON is useful when you need to store an object, but the API you're working with only lets you
store text. In Chapter 10, you learned that the native drag and drop API has a
dataTransfer
object that you can use to work with data during the drag‐and‐drop operation. But as you
learned, it doesn't let you store objects, but you can store text. JSON is text, so you can serialize
a JavaScript object at the beginning of the drag operation and parse the JSON when the drop
event fires.
Using JSON in Drag and Drop
trY it out
This example uses
ch10 _ example21.html
as a basis. Feel free to copy and paste the code from that
example and make the highlighted modifications. Otherwise, open your text editor and type the
following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 12: Example 1</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>
