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
 
Search WWH ::




Custom Search