Java Reference
In-Depth Information
Three events are related to the source of the drag—that is, the element that is being dragged. The
following table lists them.
drag sourCe events
desCription
Fires on the element when a drag is started. This does not fire when
dragging an object from the filesystem
dragstart
Fires continuously while the object is dragged
drag
Fires when the drag operation is complete, regardless of whether
the object was dropped. This does not fire when dragging an
object from the filesystem
dragend
To perform a drag‐and‐drop operation, the only event you need to listen for is
dragstart
, but
that doesn't mean the
drag
and
dragend
events are not useful. You can use them to add extra
functionality and/or visual cues to enhance the user's experience.
Creating a drop target
If you are dragging objects, chances are very good that you need some place to drop them—a drop
target. There aren't special attributes or HTML to signify an element as a drop target. Instead, you
listen for one or multiple events on the element serving as the drop target.
One of them is the
dragenter
event. This event fires when the mouse cursor enters the target while
dragging an object. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 10: Example 18</title>
<style>
.drop-zone {
width: 300px;
padding: 20px;
border: 2px dashed #000;
}
</style>
</head>
<body>
<div id="dropZone" class="drop-zone">Drop Zone!</div>
<div id="dropStatus"></div>
<script>
function handleDragEnter(e) {
dropStatus.innerHTML = "You're dragging something!";
}
var dropZone = document.getElementById("dropZone");
