dragend
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
L'événement dragend est déclenché lorsque une opération de glissement est terminée (en relâchant le bouton de la souris ou en appuyant sur la touche Echap).
Informations générales
- Interface
DragEvent
- Propagation
-
Oui
- Annulable
-
Non
- Cible
- Action par défaut
-
Varie
Propriétés
Property | Type | Description |
---|---|---|
target Lecture seule |
EventTarget |
The element that was underneath the element being dragged. |
type Lecture seule |
DOMString |
The type of event. |
bubbles Lecture seule |
Boolean |
Whether the event normally bubbles or not |
cancelable Lecture seule |
Boolean |
Whether the event is cancellable or not? |
view Lecture seule |
WindowProxy |
document.defaultView (window of the document) |
detail Lecture seule |
long (float ) |
0. |
dataTransfer |
DataTransfer | The data that underlies a drag-and-drop operation, known as the drag data store. Protected mode. |
currentTarget Lecture seule |
EventTarget | The node that had the event listener attached. |
relatedTarget Lecture seule |
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 Lecture seule |
long | The X coordinate of the mouse pointer in global (screen) coordinates. |
screenY Lecture seule |
long | The Y coordinate of the mouse pointer in global (screen) coordinates. |
clientX Lecture seule |
long | The X coordinate of the mouse pointer in local (DOM content) coordinates. |
clientY Lecture seule |
long | The Y coordinate of the mouse pointer in local (DOM content) coordinates. |
button Lecture seule |
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 Lecture seule |
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 Lecture seule |
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 Lecture seule |
boolean | true if the control key was down when the event was fired. false otherwise. |
shiftKey Lecture seule |
boolean | true if the shift key was down when the event was fired. false otherwise. |
altKey Lecture seule |
boolean | true if the alt key was down when the event was fired. false otherwise. |
metaKey Lecture seule |
boolean | true if the meta key was down when the event was fired. false otherwise. |
Exemple
html
<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;
/* Les événements sont déclenchés sur les objets glissables */
document.addEventListener("drag", function (event) {}, false);
document.addEventListener(
"dragstart",
function (event) {
// Stocke une référence sur l'objet glissable
dragged = event.target;
// transparence 50%
event.target.style.opacity = 0.5;
},
false,
);
document.addEventListener(
"dragend",
function (event) {
// reset de la transparence
event.target.style.opacity = "";
},
false,
);
/* Les événements sont déclenchés sur les cibles du drop */
document.addEventListener(
"dragover",
function (event) {
// Empêche default d'autoriser le drop
event.preventDefault();
},
false,
);
document.addEventListener(
"dragenter",
function (event) {
// Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
if (event.target.className == "dropzone") {
event.target.style.background = "purple";
}
},
false,
);
document.addEventListener(
"dragleave",
function (event) {
// reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent
if (event.target.className == "dropzone") {
event.target.style.background = "";
}
},
false,
);
document.addEventListener(
"drop",
function (event) {
// Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
event.preventDefault();
// Déplace l'élément traîné vers la cible du drop sélectionnée
if (event.target.className == "dropzone") {
event.target.style.background = "";
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);
}
},
false,
);
</script>
Spécifications
Specification |
---|
HTML Standard # ix-handler-ondragend |
HTML Standard # event-dnd-dragend |
Compatibilité des navigateurs
BCD tables only load in the browser