Java Reference
In-Depth Information
width: 200px;
margin: 2px;
background-color: gainsboro;
float: left;
}
figure 10-9
The height and width are set to accommodate two draggable boxes at a time. A margin of two pixels
gives just enough space between the drop target elements to visually separate them. A background color
makes them easily distinguishable between the page's background, and they each float left.
The next rule also applies to drop targets:
.drag-enter {
border: 2px dashed #000;
}
The
drag‐enter
class is used as a visual cue. As you drag an object over a drop target element, this
drag‐enter
class is applied to the element. This isn't necessary for the drag‐and‐drop operation to
complete, but it does enhance the user's experience.
The final set of CSS rules is used for the draggable elements:
.box {
width: 200px;
