I volontari di MDN non hanno ancora tradotto questo articolo in Italiano. Registrati per tradurlo tu.
The drag event is fired when an element or text selection is being dragged (every few hundred milliseconds).
General info
- Specification
- HTML5
- Interface
- DragEvent
- Bubbles
- Yes
- Cancelable
- Yes
- Target
- Document, Element
- Default Action
- Continue the drag & drop operation.
Properties
| Property | Type | Description |
|---|---|---|
target Read only |
EventTarget |
The element being dragged. |
type Read only |
DOMString |
The type of event. |
bubbles Read only |
boolean |
Does the event normally bubble? |
cancelable Read only |
boolean |
Is it possible to cancel the event? |
view Read only |
WindowProxy |
document.defaultView (window of the document) |
detail Read only |
long (float) |
0. |
dataTransfer |
DataTransfer | The data that underlies a drag-and-drop operation, known as the drag data store. Protected mode. |
currentTarget Read only |
EventTarget | The node that had the event listener attached. |
relatedTarget Read 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. |
screenX Read only |
long | The X coordinate of the mouse pointer in global (screen) coordinates. |
screenY Read only |
long | The Y coordinate of the mouse pointer in global (screen) coordinates. |
clientX Read only |
long | The X coordinate of the mouse pointer in local (DOM content) coordinates. |
clientY Read only |
long | The Y coordinate of the mouse pointer in local (DOM content) coordinates. |
button Read 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. |
buttons Read 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. |
mozPressure Read 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). |
ctrlKey Read only |
boolean | true if the control key was down when the event was fired. false otherwise. |
shiftKey Read only |
boolean | true if the shift key was down when the event was fired. false otherwise. |
altKey Read only |
boolean | true if the alt key was down when the event was fired. false otherwise. |
metaKey Read 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);
/* 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>