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;
Search WWH ::




Custom Search