518 CHAPTER 13 Drag and drop
The following HTML document has a <div> element onto which files can be dropped and
a <table> element that is populated with information about the dropped files.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="FileDragAndDrop.css" rel="stylesheet" />
<script src="Scripts/jquery-1.8.3.js"></script>
<script src="Scripts/FileDragAndDrop.js"></script>
</head>
<body>
<div id="target">
<p>Drag and drop files here...</p>
</div>
<table id="fileInfo"></table>
</body>
</html>The FileDragAndDrop.css file contains style rules to size the drag and drop target. This file
also contains style rules to format the file information table as follows.
#target {
border: solid;
height: 150px;
width: 500px;
background-color: yellow;
text-align: center;
}#fileInfo {
width: 500px;
}table, th, td {
border-collapse: collapse;
border: 1px solid black;
}th, td {
padding: 5px;
}Figure 13-5 shows the webpage. There is no JavaScript yet, so you might think that you
can’t drag and drop any files here, but there is a default behavior for files that are dragged
and dropped. If you drop a file anywhere on the webpage, the file opens in another window.
For example, if you drag and drop a movie onto the webpage, the movie will start playing in
a new window.