UNPKG

@vdnd/v3

Version:

Easy used vue drag and drop component library.

github.com/zhengbaodi/vdnd

zhengbaodi/vdnd

121 lines (85 loc) • 6.81 kB
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
# drag | Parameter | Type | Description | | ------------- | -------------- | --------------------------- | | type | string | 'drag' | | container | HTMLElement | **dnd container** | | source | object | **the current source** | | over | object \| null | **the current drop target** | | originalEvent | Event \| null | | The `drag` event emitted by `MouseDnd` or `TouchDnd`, `originalEvent` is null. `MouseDnd` and `TouchDnd` emit `drag` event per 50ms, the frequency of `NativeDnd` emitting `drag` event is consistent with that of native `drag` event emitted by browser. Updating elements related to the interaction in the event handlers of this event is **unsafe**, such as removes **the current source** from DOM. # drag:start | Parameter | Type | Description | | ------------- | ----------- | ---------------------- | | type | string | 'drag:start' | | container | HTMLElement | **dnd container** | | source | object | **the current source** | | originalEvent | Event | | Updating elements related to the interaction in the event handlers of this event is **unsafe**. # drag:prevent | Parameter | Type | Description | | ------------- | ----------- | --------------------------------- | | type | string | 'drag:prevent' | | container | HTMLElement | **dnd container** | | source | object | the **source** attempting to drag | | originalEvent | Event | | Updating elements related to the interaction in the event handlers of this event is **safe**. # drag:enter | Parameter | Type | Description | | ------------- | ----------- | --------------------------------------------------------------------- | | type | string | 'drag:enter' | | container | HTMLElement | **dnd container** | | source | object | **the current source** | | enter | object | the **dropzone** which is about to become **the current drop target** | | originalEvent | Event | | Updating elements related to the interaction in the event handlers of this event is **unsafe**. # drag:leave | Parameter | Type | Description | | ------------- | ----------- | ------------------------------------------------------------------- | | type | string | 'drag:leave' | | container | HTMLElement | **dnd container** | | source | object | **the current source** | | leave | object | **the current drop target** or **the previous current drop target** | | originalEvent | Event | | Updating elements related to the interaction in the event handlers of this event is **unsafe**. # drag:over | Parameter | Type | Description | | ------------- | ------------- | --------------------------- | | type | string | 'drag:over' | | container | HTMLElement | **dnd container** | | source | object | **the current source** | | over | object | **the current drop target** | | originalEvent | Event \| null | | The `drag:over` event emitted by `MouseDnd` or `TouchDnd`, `originalEvent` is null. `MouseDnd` and `TouchDnd` emit `drag:over` event per 50ms, the frequency of `NativeDnd` emitting `drag:over` event is consistent with that of native `drag:over` event emitted by browser. Updating elements related to the interaction in the event handlers of this event is **unsafe**. # drop | Parameter | Type | Description | | ------------- | ----------- | --------------------------- | | type | string | 'drop' | | container | HTMLElement | **dnd container** | | source | object | **the current source** | | dropzone | object | **the current drop target** | | originalEvent | Event | | Updating elements related to the interaction in the event handlers of this event is **safe**. When emitting `drop` event, the interaction state has not been reset, `source` and `over` property of **DndInstance** still are nonnull. # drag:end | Parameter | Type | Description | | ------------- | -------------- | --------------------------- | | type | string | 'drag:end' | | container | HTMLElement | **dnd container** | | source | object | **the current source** | | over | object \| null | **the current drop target** | | originalEvent | Event | | We can terminate the interaction by pressing the `esc` key when using `MouseDnd` or `NativeDnd`. | Whether **the current drop target** exists or not when terminating | behavior | | ------------------------------------------------------------------ | ------------------------------------------------------------------- | | exists | `DndProvider` emits `drag:leave` event first, then `drag:end` event | | does not exist | `DndProvider` only emits `drag:end` event | Updating elements related to the interaction in the event handlers of this event is **safe**. When emitting `drag:end` event, the interaction state has been reset, `source` and `over` property of **DndInstance** have been reset to null, and the related styles have been reset also. # initialized No Parameters. Updating elements related to the interaction in the event handlers of this event is **safe**. If we want to add event handlers by **DndInstace**, then we must do in the event handlers of this event, otherwise it will be unsafe.