Java Reference
In-Depth Information
figure 10-8
The grayish areas are drop targets, and the blue and red boxes are draggable objects. Drag the blue box
to the empty drop target, and you'll see a dashed border appear around the target (Figure 10-9).
Drop the blue box on that target, and you'll see it move from the left target to the right. Now drag the
boxes between the two drop targets to see the full effect.
Let's start with the HTML. A drop target in this example is an element identified with the
data‐drop‐target
attribute set to
true
. This example consists of two drop targets, although you can
easily add more:
<div data-drop-target="true">
<div id="box1" draggable="true" class="box navy"></div>
<div id="box2" draggable="true" class="box red"></div>
</div>
<div data-drop-target="true"></div>
The first drop target contains two draggable
<div/>
elements, and they each have an
id
attribute. Other
than their
id
values, the only difference is their CSS. Both use the
box
CSS class, but one also uses the
navy
CSS class, whereas the other uses the
red
class.
Speaking of CSS, let's look at the styles defined in the style sheet. The first rule matches all elements
that have a
data‐drop‐target
attribute:
[data-drop-target] {
height: 400px;