HTML and CSS Reference
In-Depth Information
Now let's style an element that can receive the drop, so that when the dragged item is
over it, it is obvious that you can drop the element there (as opposed to just dropping
it in any location):
var catcher = document.getElementById("catcher"); // catch the dropped element
catcher.addEventListener(
"dragenter"
, function(evt) {
this.style.border = "3px solid red"; // give the catcher a red border
}, false);
catcher.addEventListener(
"dragleave"
, function(evt) {
this.style.border = ""; // remove the border from the catcher
}, false);
catcher.addEventListener(
"dragover"
, function(evt) {
if (evt.preventDefault) evt.
preventDefault
();
return false;
}, false);
In the preceding snippet, we added event listeners to the element that catches our
dropped element for the
dragover
,
dragenter
, and
dragleave
events. The
dragenter
and
dragleave
events simply toggle on and off a red border for our target element, to make
it clear that you can drop the element there (as shown in
Figure 10-1
).
Figure 10-1. Showing the drag event in progress, dragging the yellow box into the blue box