-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
143 lines (113 loc) · 4.4 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
---
title: "DataTransfer: dropEffect property"
short-title: dropEffect
slug: Web/API/DataTransfer/dropEffect
page-type: web-api-instance-property
browser-compat: api.DataTransfer.dropEffect
---
{{APIRef("HTML Drag and Drop API")}}
The **`DataTransfer.dropEffect`** property controls the
feedback (typically visual) the user is given during a drag and drop operation. It will
affect which cursor is displayed while dragging. For example, when the user hovers over
a target drop element, the browser's cursor may indicate which type of operation will
occur.
When the {{domxref("DataTransfer")}} object is created, `dropEffect` is set
to a string value. On getting, it returns its current value. On setting, if the new
value is one of the values listed below, then the property's current value will be set
to the new value and other values will be ignored.
For the {{domxref("HTMLElement/dragenter_event", "dragenter")}} and {{domxref("HTMLElement/dragover_event", "dragover")}} events,
`dropEffect` will be initialized based on what action the user is requesting.
How this is determined is platform specific, but typically the user can press modifier
keys such as the alt key to adjust the desired action. Within event handlers for
{{domxref("HTMLElement/dragenter_event", "dragenter")}} and {{domxref("HTMLElement/dragover_event", "dragover")}} events, `dropEffect` should
be modified if a different action is desired than the action that the user is
requesting.
For the {{domxref("HTMLElement/drop_event", "drop")}} and {{domxref("HTMLElement/dragend_event", "dragend")}} events, `dropEffect` will
be set to the action that was desired, which will be the value `dropEffect`
had after the last {{domxref("HTMLElement/dragenter_event", "dragenter")}} or {{domxref("HTMLElement/dragover_event", "dragover")}} event. In a
{{domxref("HTMLElement/dragend_event", "dragend")}} event, for instance, if the desired dropEffect is "move", then the
data being dragged should be removed from the source.
## Value
A string representing the drag operation effect. The possible values
are:
- `copy`
- : A copy of the source item is made at the new location.
- `move`
- : An item is moved to a new location.
- `link`
- : A link is established to the source at the new location.
- `none`
- : The item may not be dropped.
Assigning any other value to `dropEffect` has no effect and the old value is
retained.
## Example
This example shows the use of the `dropEffect` and
{{domxref("DataTransfer.effectAllowed","effectAllowed")}} properties.
### HTML
```html
<div>
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
Select this element, drag it to the Drop Zone and then release the selection
to move the element.
</p>
</div>
<div
id="target"
ondrop="drop_handler(event);"
ondragover="dragover_handler(event);">
Drop Zone
</div>
```
### CSS
```css
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
```
### JavaScript
```js
function dragstart_handler(ev) {
console.log(
`dragStart: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`,
);
// Add this element's id to the drag payload so the drop handler will
// know which element to add to its tree
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.effectAllowed = "move";
}
function drop_handler(ev) {
console.log(
`drop: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`,
);
ev.preventDefault();
// Get the id of the target and add the moved element to the target's DOM
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
function dragover_handler(ev) {
console.log(
`dragOver: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`,
);
ev.preventDefault();
// Set the dropEffect to move
ev.dataTransfer.dropEffect = "move";
}
```
{{EmbedLiveSample('Example', 300, 250)}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- [Drag and drop](/en-US/docs/Web/API/HTML_Drag_and_Drop_API)
- [Drag Operations](/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations)
- [Recommended Drag Types](/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types)
- [DataTransfer test - Paste or Drag](https://codepen.io/tech_query/pen/MqGgap)