HTML and CSS Reference
In-Depth Information
if (e.preventDefault) e.preventDefault();
return false;
}
…
We need to remove this class in the
dragEndHandler()
and
dragLeaveHand-
ler()
functions, so we'll set the
className
property on those to
null
, which will
remove the CSS class:
…
function dragEndHandler(e) {
console.log("dragend");
droptarget.className = null;
}
…
function dragLeaveHandler(e) {
console.log("dragleave");
droptarget.className = null;
}
…
Finally, we need to prevent the default behavior of the
dropHandler()
function.
Some browsers will try to open content that has been dropped. For instance, a link that
is dragged and dropped into a browser window may cause the browser to navigate to the
link's URL. To prevent this, make the following edit to
script.js
:
…
function dropHandler(e) {
console.log("drop");
droptarget.innerHTML
=
e.dataTransfer.getData("text/plain");
if (e.preventDefault) e.preventDefault();
return false;
}
…
Now if you test this drag-and-drop operation, you should see the text payload added
when the drag-and-drop operation is complete, and the border should appear and disap-
pear during the operation (
Figure 7-14
)
.
Search WWH ::
Custom Search