Graphics Reference
In-Depth Information
How to do it...
To do this, please carry out the following steps:
1. First, we have to set up the correct CSS and define the drop area. To create
the dashed drop area, we add the following CSS to the
style
element in the
head
element of our page:
#holder { border: 10px dashed #ccc;
width: 150px; height: 150px;
margin: 20px auto;}
#holder.hover { border: 10px dashed
#333; #333}
As you can see in this CSS, we style the HTML element with ID
holder
to
have a dashed border. The HTML for the
holder div
element is shown
next:
<body>
<div id="holder"></div>
</body>
The drop area has been defined, so the next step is to add drag and drop the
functionality to it.
2. Then, we have to assign the correct event handlers so that we can respond
to the various drag and drop related events.
3. Just as in our previous recipes, we defined a function that contains all the re-
quired logic:
function setupDragDrop() {
var holder =
document.getElementById('holder');
holder.ondragover = function() {
this.className = 'hover';
return false;
