The data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTargetRead only
EventTarget
The node that had the event listener attached.
relatedTargetRead only
EventTarget
For mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenXRead only
long
The X coordinate of the mouse pointer in global (screen) coordinates.
screenYRead only
long
The Y coordinate of the mouse pointer in global (screen) coordinates.
clientXRead only
long
The X coordinate of the mouse pointer in local (DOM content) coordinates.
clientYRead only
long
The Y coordinate of the mouse pointer in local (DOM content) coordinates.
buttonRead only
unsigned short
The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttonsRead only
unsigned short
The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressureRead only
float
The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKeyRead only
boolean
true if the control key was down when the event was fired. false otherwise.
shiftKeyRead only
boolean
true if the shift key was down when the event was fired. false otherwise.
altKeyRead only
boolean
true if the alt key was down when the event was fired. false otherwise.
metaKeyRead only
boolean
true if the meta key was down when the event was fired. false otherwise.
Example
<div class="dropzone">
<div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
This div is draggable
</div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<style>
#draggable {
width: 200px;
height: 20px;
text-align: center;
background: white;
}
.dropzone {
width: 200px;
height: 20px;
background: blueviolet;
margin-bottom: 10px;
padding: 10px;
}
</style>
<script>
var dragged;
/* events fired on the draggable target */
document.addEventListener("drag", function( event ) {
}, false);
document.addEventListener("dragstart", function( event ) {
// store a ref. on the dragged elem
dragged = event.target;
// make it half transparent
event.target.style.opacity = .5;
}, false);
document.addEventListener("dragend", function( event ) {
// reset the transparency
event.target.style.opacity = "";
}, false);
document.addEventListener("dragexit", function( event ) {
// reset the transparency
event.target.style.opacity = "";
}, false);
/* events fired on the drop targets */
document.addEventListener("dragover", function( event ) {
// prevent default to allow drop
event.preventDefault();
}, false);
document.addEventListener("dragenter", function( event ) {
// highlight potential drop target when the draggable element enters it
if ( event.target.className == "dropzone" ) {
event.target.style.background = "purple";
}
}, false);
document.addEventListener("dragleave", function( event ) {
// reset background of potential drop target when the draggable element leaves it
if ( event.target.className == "dropzone" ) {
event.target.style.background = "";
}
}, false);
document.addEventListener("drop", function( event ) {
// prevent default action (open as link for some elements)
event.preventDefault();
// move dragged elem to the selected drop target
if ( event.target.className == "dropzone" ) {
event.target.style.background = "";
dragged.parentNode.removeChild( dragged );
event.target.appendChild( dragged );
}
}, false);
</script>