Lesson 1: Dragging and dropping CHAPTER 13 509
-ms-user-select: none;
user-select: none;
}The first style rule is for the container, which has a solid border, and the height and width
settings form a square. The setting of the margin-left and margin-right to auto results in the
container being centered.
The next style rule is for the holes. Each hole is a black square. The last style rule is for the
items. An item is a gray square with a number in it. The number is centered and displays in a
large font. Note that the last part of the style rule sets the user-select property to none and
that there are several entries, based on the browser manufacturer. This property is set to none
to keep the user from swiping across the item by mistake and selecting the text, which is the
number. Figure 13-1 shows the rendered webpage.FIGURE 13-1 he initial HTML page ready for drag and drop functionalityTDragging
To specify to the browser that an element can be dragged, use the draggable attribute, which
has three valid values: true, false, and auto. For most browsers, the auto setting is the default,
which means that the browser decides whether the element should be draggable. For exam-
ple, the <img> element is usually draggable by default, but a <div> element is not draggable
by default. In this sample HTML document, the item is a <div> element, and it’s not drag-
gable by default. After adding the draggable attribute, the container looks like the following.
<div id="container">
<div id="hole1" class="hole">
<div id="item1" draggable="true" class="item">1</div>