-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
118 lines (81 loc) · 2.65 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
---
title: "HTMLElement: dragstart event"
short-title: dragstart
slug: Web/API/HTMLElement/dragstart_event
page-type: web-api-event
browser-compat: api.HTMLElement.dragstart_event
---
{{APIRef}}
The `dragstart` event is fired when the user starts dragging an element or text selection.
This event is cancelable and may bubble up to the {{domxref("Document")}} and {{domxref("Window")}} objects.
## Syntax
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
```js
addEventListener("dragstart", (event) => {});
ondragstart = (event) => {};
```
## Event type
A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}.
{{InheritanceDiagram("DragEvent")}}
## Event properties
_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._
- {{domxref('DragEvent.dataTransfer')}} {{ReadOnlyInline}}
- : The data that is transferred during a drag-and-drop interaction.
## Examples
### Setting opacity on drag start
In this example, we have a draggable element inside a container. Try grabbing the element, dragging it, and then releasing it.
We listen for the `dragstart` event to make the element half transparent while dragged.
For a complete example of drag and drop, see the page for the [`drag`](/en-US/docs/Web/API/HTMLElement/drag_event) event.
#### HTML
```html
<div id="container">
<div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone"></div>
```
#### CSS
```css
body {
/* Prevent the user from selecting text in the example */
user-select: none;
}
#draggable {
text-align: center;
background: white;
}
#container {
width: 200px;
height: 20px;
background: blueviolet;
padding: 10px;
}
.dragging {
opacity: 0.5;
}
```
#### JavaScript
```js
const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
// make it half transparent
event.target.classList.add("dragging");
});
source.addEventListener("dragend", (event) => {
// reset the transparency
event.target.classList.remove("dragging");
});
```
#### Result
{{EmbedLiveSample('Setting opacity on drag start')}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- Other drag and drop events:
- {{domxref("HTMLElement/drag_event", "drag")}}
- {{domxref("HTMLElement/dragend_event", "dragend")}}
- {{domxref("HTMLElement/dragover_event", "dragover")}}
- {{domxref("HTMLElement/dragenter_event", "dragenter")}}
- {{domxref("HTMLElement/dragleave_event", "dragleave")}}
- {{domxref("HTMLElement/drop_event", "drop")}}