508 CHAPTER 13 Drag and drop
To illustrate the drag and drop technique, consider the following HTML page, which
defines a large square with three squares inside it.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="MicroScramble.css" rel="stylesheet" />
<script src="Scripts/jquery-1.8.3.js"></script>
<script src="Scripts/MicroScramble.js"></script>
</head>
<body>
<div id="container">
<div id="hole1" class="hole"><div id="item1" class="item">1</div></div>
<div id="hole2" class="hole"><div id="item2" class="item">2</div></div>
<div id="hole3" class="hole"><div id="item3" class="item">3</div></div>
<div id="hole4" class="hole"></div>
</div>
</body>
</html>This HTML document contains a <div> element whose id is called container. Inside the
container are four <div> elements that are holes that can contain an item. The first three
holes are populated with an item.
The HTML document contains a reference to the MicroScramble.css style sheet, which
contains the following style rules.
#container {
border: solid;
width: 332px;
height: 332px;
margin-right: auto;
margin-left: auto;
}.hole {
background-color: black;
border: solid;
width: 160px;
height: 160px;
float: left;
}.item {
font-size: 128px;
font-family: Arial, Helvetica, sans-serif;
width: 140px;
height: 140px;
background-color: #C0C0C0;
color: #FFFFFF;
text-align: center;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;