easy-drag-and-drop 1.3.79 → 1.3.81
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/example.js +364 -366
- package/lib/customEventTypes.js +49 -0
- package/lib/element/drag.js +2 -5
- package/lib/element/drop.js +2 -5
- package/lib/example/div/drag.js +3 -3
- package/lib/example/div/drop.js +10 -10
- package/lib/index.js +5 -5
- package/lib/mixins/drag.js +63 -130
- package/lib/mixins/drop.js +36 -106
- package/package.json +2 -2
- package/src/customEventTypes.js +17 -0
- package/src/element/drag.js +1 -4
- package/src/element/drop.js +1 -4
- package/src/example/div/drag.js +2 -2
- package/src/example/div/drop.js +9 -9
- package/src/index.js +1 -2
- package/src/mixins/drag.js +97 -141
- package/src/mixins/drop.js +43 -91
- package/lib/eventTypes.js +0 -49
- package/src/eventTypes.js +0 -17
package/src/mixins/drag.js
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import { keyCodes
|
|
3
|
+
import { keyCodes } from "necessary" ;
|
|
4
4
|
import { window, eventTypes, mouseButtons } from "easy";
|
|
5
5
|
|
|
6
6
|
import { START_DRAGGING_DELAY } from "../constants";
|
|
7
7
|
import { checkDragElementIgnoresDropElement } from "../utilities/reference";
|
|
8
8
|
import { mouseTopFromEvent, mouseLeftFromEvent } from "../utilities/event";
|
|
9
|
-
import {
|
|
9
|
+
import { DRAG_CUSTOM_CUSTOM_EVENT_TYPE, STOP_DRAG_CUSTOM_EVENT_TYPE, START_DRAG_CUSTOM_EVENT_TYPE } from "../customEventTypes";
|
|
10
10
|
|
|
11
|
-
const {
|
|
12
|
-
{ ESCAPE_KEY_CODE } = keyCodes,
|
|
11
|
+
const { ESCAPE_KEY_CODE } = keyCodes,
|
|
13
12
|
{ BLUR_EVENT_TYPE } = eventTypes,
|
|
14
13
|
{ LEFT_MOUSE_BUTTON } = mouseButtons;
|
|
15
14
|
|
|
@@ -19,63 +18,13 @@ Object.assign(globalThis, {
|
|
|
19
18
|
dragElement
|
|
20
19
|
});
|
|
21
20
|
|
|
22
|
-
function onDrag(dragHandler, element) {
|
|
23
|
-
const eventType = DRAG_EVENT_TYPE,
|
|
24
|
-
handler = dragHandler; ///
|
|
25
|
-
|
|
26
|
-
this.addEventListener(eventType, handler, element);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
function offDrag(dragHandler, element) {
|
|
30
|
-
const eventType = DRAG_EVENT_TYPE,
|
|
31
|
-
handler = dragHandler; ///
|
|
32
|
-
|
|
33
|
-
this.removeEventListener(eventType, handler, element);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
function onStopDrag(stopDragHandler, element) {
|
|
37
|
-
const eventType = STOP_DRAG_EVENT_TYPE,
|
|
38
|
-
handler = stopDragHandler; ///
|
|
39
|
-
|
|
40
|
-
this.addEventListener(eventType, handler, element);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
function offStopDrag(stopDragHandler, element) {
|
|
44
|
-
const eventType = STOP_DRAG_EVENT_TYPE,
|
|
45
|
-
handler = stopDragHandler; ///
|
|
46
|
-
|
|
47
|
-
this.removeEventListener(eventType, handler, element);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
function onStartDrag(startDragHandler, element) {
|
|
51
|
-
const eventType = START_DRAG_EVENT_TYPE,
|
|
52
|
-
handler = startDragHandler; ///
|
|
53
|
-
|
|
54
|
-
this.addEventListener(eventType, handler, element);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
function offStartDrag(startDragHandler, element) {
|
|
58
|
-
const eventType = START_DRAG_EVENT_TYPE,
|
|
59
|
-
handler = startDragHandler; ///
|
|
60
|
-
|
|
61
|
-
this.removeEventListener(eventType, handler, element);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
21
|
function enableDrag() {
|
|
65
|
-
const
|
|
66
|
-
dragHandler = onDrag, ///
|
|
67
|
-
stopDragHandler = onStopDrag, ///
|
|
68
|
-
startDragHandler = onStartDrag, ///
|
|
69
|
-
timeout = null,
|
|
22
|
+
const timeout = null,
|
|
70
23
|
topOffset = null,
|
|
71
24
|
leftOffset = null,
|
|
72
25
|
startMouseTop = null,
|
|
73
26
|
startMouseLeft = null;
|
|
74
27
|
|
|
75
|
-
dragHandler && this.onDrag(dragHandler);
|
|
76
|
-
stopDragHandler && this.onStopDrag(stopDragHandler);
|
|
77
|
-
startDragHandler && this.onStartDrag(startDragHandler);
|
|
78
|
-
|
|
79
28
|
this.onMouseDown(mouseDownHandler, this);
|
|
80
29
|
|
|
81
30
|
this.setState({
|
|
@@ -88,15 +37,6 @@ function enableDrag() {
|
|
|
88
37
|
}
|
|
89
38
|
|
|
90
39
|
function disableDrag() {
|
|
91
|
-
const { onDrag, onStopDrag, onStartDrag } = this.properties,
|
|
92
|
-
dragHandler = onDrag, ///
|
|
93
|
-
stopDragHandler = onStopDrag, ///
|
|
94
|
-
startDragHandler = onStartDrag; ///
|
|
95
|
-
|
|
96
|
-
dragHandler && this.offDrag(dragHandler);
|
|
97
|
-
stopDragHandler && this.offStopDrag(stopDragHandler);
|
|
98
|
-
startDragHandler && this.offStartDrag(startDragHandler);
|
|
99
|
-
|
|
100
40
|
this.offMouseDown(mouseDownHandler, this);
|
|
101
41
|
}
|
|
102
42
|
|
|
@@ -106,33 +46,8 @@ function isDragging() {
|
|
|
106
46
|
return dragging;
|
|
107
47
|
}
|
|
108
48
|
|
|
109
|
-
function startWaitingToDrag(mouseTop, mouseLeft) {
|
|
110
|
-
let timeout = this.getTimeout();
|
|
111
|
-
|
|
112
|
-
if (timeout === null) {
|
|
113
|
-
timeout = setTimeout(() => {
|
|
114
|
-
this.resetTimeout();
|
|
115
|
-
|
|
116
|
-
this.startDrag(mouseTop, mouseLeft);
|
|
117
|
-
}, START_DRAGGING_DELAY);
|
|
118
|
-
|
|
119
|
-
this.updateTimeout(timeout);
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
function stopWaitingToDrag() {
|
|
124
|
-
const timeout = this.getTimeout();
|
|
125
|
-
|
|
126
|
-
if (timeout !== null) {
|
|
127
|
-
clearTimeout(timeout);
|
|
128
|
-
|
|
129
|
-
this.resetTimeout();
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
|
|
133
49
|
function startDrag(mouseTop, mouseLeft) {
|
|
134
50
|
const bounds = this.getBounds(),
|
|
135
|
-
eventType = START_DRAG_EVENT_TYPE,
|
|
136
51
|
boundsTop = bounds.getTop(),
|
|
137
52
|
boundsLeft = bounds.getLeft(),
|
|
138
53
|
boundsRight = bounds.getRight(),
|
|
@@ -143,7 +58,8 @@ function startDrag(mouseTop, mouseLeft) {
|
|
|
143
58
|
leftOffset = Math.floor(boundsWidth / 2),
|
|
144
59
|
dragElement = this, ///
|
|
145
60
|
startMouseTop = mouseTop, ///
|
|
146
|
-
startMouseLeft = mouseLeft
|
|
61
|
+
startMouseLeft = mouseLeft, ///
|
|
62
|
+
customEventType = START_DRAG_CUSTOM_EVENT_TYPE;
|
|
147
63
|
|
|
148
64
|
window.onKeyDown(keyDownHandler, this);
|
|
149
65
|
|
|
@@ -163,21 +79,21 @@ function startDrag(mouseTop, mouseLeft) {
|
|
|
163
79
|
|
|
164
80
|
this.setStartMouseLeft(startMouseLeft);
|
|
165
81
|
|
|
166
|
-
this.
|
|
82
|
+
this.callCustomHandlers(customEventType);
|
|
167
83
|
|
|
168
84
|
this.drag(mouseTop, mouseLeft);
|
|
169
85
|
}
|
|
170
86
|
|
|
171
87
|
function stopDrag(aborted) {
|
|
172
88
|
const { dropElement } = globalThis,
|
|
173
|
-
|
|
89
|
+
customEventType = STOP_DRAG_CUSTOM_EVENT_TYPE;
|
|
174
90
|
|
|
175
91
|
window.offKeyDown(keyDownHandler, this);
|
|
176
92
|
|
|
177
93
|
window.offMouseMove(mouseMoveHandler, this);
|
|
178
94
|
|
|
179
95
|
const done = () => {
|
|
180
|
-
this.
|
|
96
|
+
this.callCustomHandlersAsync(customEventType, dropElement, aborted, () => {
|
|
181
97
|
const dragElement = null;
|
|
182
98
|
|
|
183
99
|
Object.assign(globalThis, {
|
|
@@ -204,18 +120,18 @@ function stopDrag(aborted) {
|
|
|
204
120
|
}
|
|
205
121
|
|
|
206
122
|
function drag(mouseTop, mouseLeft) {
|
|
207
|
-
const
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
123
|
+
const scrollTop = window.getScrollTop(),
|
|
124
|
+
scrollLeft = window.getScrollLeft(),
|
|
125
|
+
topOffset = this.getTopOffset(),
|
|
126
|
+
leftOffset = this.getLeftOffset(),
|
|
127
|
+
startMouseTop = this.getStartMouseTop(),
|
|
128
|
+
startMouseLeft = this.getStartMouseLeft(),
|
|
129
|
+
customEventType = DRAG_CUSTOM_CUSTOM_EVENT_TYPE,
|
|
130
|
+
relativeMouseTop = mouseTop - startMouseTop,
|
|
131
|
+
relativeMouseLeft = mouseLeft - startMouseLeft;
|
|
216
132
|
|
|
217
133
|
let top = startMouseTop + relativeMouseTop - topOffset - scrollTop,
|
|
218
|
-
|
|
134
|
+
left = startMouseLeft + relativeMouseLeft - leftOffset - scrollLeft;
|
|
219
135
|
|
|
220
136
|
top = `${top}px`; ///
|
|
221
137
|
left = `${left}px`; ///
|
|
@@ -227,7 +143,73 @@ function drag(mouseTop, mouseLeft) {
|
|
|
227
143
|
|
|
228
144
|
this.css(css);
|
|
229
145
|
|
|
230
|
-
this.
|
|
146
|
+
this.callCustomHandlers(customEventType, relativeMouseTop, relativeMouseLeft);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
function onCustomDrag(dragCustomHandler, element) {
|
|
150
|
+
const customEventType = DRAG_CUSTOM_CUSTOM_EVENT_TYPE,
|
|
151
|
+
customHandler = dragCustomHandler; ///
|
|
152
|
+
|
|
153
|
+
this.onCustomEvent(customEventType, customHandler, element);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
function offCustomDrag(dragCustomHandler, element) {
|
|
157
|
+
const customEventType = DRAG_CUSTOM_CUSTOM_EVENT_TYPE,
|
|
158
|
+
customHandler = dragCustomHandler; ///
|
|
159
|
+
|
|
160
|
+
this.offCustomEvent(customEventType, customHandler, element);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
function onCustomStopDrag(stopDragCustomHandler, element) {
|
|
164
|
+
const customEventType = STOP_DRAG_CUSTOM_EVENT_TYPE,
|
|
165
|
+
customHandler = stopDragCustomHandler; ///
|
|
166
|
+
|
|
167
|
+
this.onCustomEvent(customEventType, customHandler, element);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
function offCustomStopDrag(stopDragCustomHandler, element) {
|
|
171
|
+
const customEventType = STOP_DRAG_CUSTOM_EVENT_TYPE,
|
|
172
|
+
customHandler = stopDragCustomHandler; ///
|
|
173
|
+
|
|
174
|
+
this.offCustomEvent(customEventType, customHandler, element);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
function onCustomStartDrag(startDragCustomHandler, element) {
|
|
178
|
+
const customEventType = START_DRAG_CUSTOM_EVENT_TYPE,
|
|
179
|
+
customHandler = startDragCustomHandler; ///
|
|
180
|
+
|
|
181
|
+
this.onCustomEvent(customEventType, customHandler, element);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
function offCustomStartDrag(startDragCustomHandler, element) {
|
|
185
|
+
const customEventType = START_DRAG_CUSTOM_EVENT_TYPE,
|
|
186
|
+
customHandler = startDragCustomHandler; ///
|
|
187
|
+
|
|
188
|
+
this.offCustomEvent(customEventType, customHandler, element);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
function startWaitingToDrag(mouseTop, mouseLeft) {
|
|
192
|
+
let timeout = this.getTimeout();
|
|
193
|
+
|
|
194
|
+
if (timeout === null) {
|
|
195
|
+
timeout = setTimeout(() => {
|
|
196
|
+
this.resetTimeout();
|
|
197
|
+
|
|
198
|
+
this.startDrag(mouseTop, mouseLeft);
|
|
199
|
+
}, START_DRAGGING_DELAY);
|
|
200
|
+
|
|
201
|
+
this.updateTimeout(timeout);
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
function stopWaitingToDrag() {
|
|
206
|
+
const timeout = this.getTimeout();
|
|
207
|
+
|
|
208
|
+
if (timeout !== null) {
|
|
209
|
+
clearTimeout(timeout);
|
|
210
|
+
|
|
211
|
+
this.resetTimeout();
|
|
212
|
+
}
|
|
231
213
|
}
|
|
232
214
|
|
|
233
215
|
function getTimeout() {
|
|
@@ -296,45 +278,21 @@ function setStartMouseLeft(startMouseLeft) {
|
|
|
296
278
|
});
|
|
297
279
|
}
|
|
298
280
|
|
|
299
|
-
function callHandlers(eventType, ...remainingArguments) {
|
|
300
|
-
const eventListeners = this.findEventListeners(eventType);
|
|
301
|
-
|
|
302
|
-
eventListeners.forEach((eventListener) => {
|
|
303
|
-
const { handler, element: handlerElement } = eventListener,
|
|
304
|
-
element = this; ///
|
|
305
|
-
|
|
306
|
-
handler.call(handlerElement, ...remainingArguments, element);
|
|
307
|
-
});
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
function callHandlersAsync(eventType, ...remainingArguments) {
|
|
311
|
-
const done = remainingArguments.pop(), ///
|
|
312
|
-
eventListeners = this.findEventListeners(eventType);
|
|
313
|
-
|
|
314
|
-
forEach(eventListeners, (eventListener, next) => {
|
|
315
|
-
const { handler, element: handlerElement } = eventListener,
|
|
316
|
-
element = this, ///
|
|
317
|
-
done = next; ///
|
|
318
|
-
|
|
319
|
-
handler.call(handlerElement, ...remainingArguments, element, done);
|
|
320
|
-
}, done);
|
|
321
|
-
}
|
|
322
|
-
|
|
323
281
|
export default {
|
|
324
|
-
onDrag,
|
|
325
|
-
offDrag,
|
|
326
|
-
onStopDrag,
|
|
327
|
-
offStopDrag,
|
|
328
|
-
onStartDrag,
|
|
329
|
-
offStartDrag,
|
|
330
282
|
enableDrag,
|
|
331
283
|
disableDrag,
|
|
332
284
|
isDragging,
|
|
333
|
-
startWaitingToDrag,
|
|
334
|
-
stopWaitingToDrag,
|
|
335
285
|
startDrag,
|
|
336
286
|
stopDrag,
|
|
337
287
|
drag,
|
|
288
|
+
onCustomDrag,
|
|
289
|
+
offCustomDrag,
|
|
290
|
+
onCustomStopDrag,
|
|
291
|
+
offCustomStopDrag,
|
|
292
|
+
onCustomStartDrag,
|
|
293
|
+
offCustomStartDrag,
|
|
294
|
+
startWaitingToDrag,
|
|
295
|
+
stopWaitingToDrag,
|
|
338
296
|
getTimeout,
|
|
339
297
|
resetTimeout,
|
|
340
298
|
updateTimeout,
|
|
@@ -345,9 +303,7 @@ export default {
|
|
|
345
303
|
setTopOffset,
|
|
346
304
|
setLeftOffset,
|
|
347
305
|
setStartMouseTop,
|
|
348
|
-
setStartMouseLeft
|
|
349
|
-
callHandlers,
|
|
350
|
-
callHandlersAsync
|
|
306
|
+
setStartMouseLeft
|
|
351
307
|
};
|
|
352
308
|
|
|
353
309
|
function keyDownHandler(event, element) {
|
|
@@ -372,7 +328,7 @@ function mouseUpHandler(event, element) {
|
|
|
372
328
|
|
|
373
329
|
event.stopPropagation();
|
|
374
330
|
|
|
375
|
-
window.
|
|
331
|
+
window.offEvent(BLUR_EVENT_TYPE, mouseUpHandler, this); ///
|
|
376
332
|
|
|
377
333
|
window.offMouseUp(mouseUpHandler, this);
|
|
378
334
|
}
|
|
@@ -393,7 +349,7 @@ function mouseDownHandler(event, element) {
|
|
|
393
349
|
|
|
394
350
|
event.stopPropagation();
|
|
395
351
|
|
|
396
|
-
window.
|
|
352
|
+
window.onEvent(BLUR_EVENT_TYPE, mouseUpHandler, this); ///
|
|
397
353
|
|
|
398
354
|
window.onMouseUp(mouseUpHandler, this);
|
|
399
355
|
}
|
package/src/mixins/drop.js
CHANGED
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import { asynchronousUtilities } from "necessary" ;
|
|
4
|
-
|
|
5
3
|
import { checkDragElementIgnoresDropElement } from "../utilities/reference";
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
const { forEach } = asynchronousUtilities;
|
|
4
|
+
import { DROP_CUSTOM_EVENT_TYPE, DRAG_OUT_CUSTOM_EVENT_TYPE, DRAG_OVER_CUSTOM_EVENT_TYPE } from "../customEventTypes";
|
|
9
5
|
|
|
10
6
|
const dropElement = null;
|
|
11
7
|
|
|
@@ -14,131 +10,87 @@ Object.assign(globalThis, {
|
|
|
14
10
|
});
|
|
15
11
|
|
|
16
12
|
function drop(dragElement, aborted, done) {
|
|
17
|
-
const
|
|
13
|
+
const customEventType = DROP_CUSTOM_EVENT_TYPE;
|
|
18
14
|
|
|
19
|
-
this.
|
|
15
|
+
this.callCustomHandlersAsync(customEventType, dragElement, aborted, done);
|
|
20
16
|
}
|
|
21
17
|
|
|
22
18
|
function dragOut(dragElement) {
|
|
23
|
-
const
|
|
19
|
+
const customEventType = DRAG_OUT_CUSTOM_EVENT_TYPE;
|
|
24
20
|
|
|
25
|
-
this.
|
|
21
|
+
this.callCustomHandlers(customEventType, dragElement);
|
|
26
22
|
}
|
|
27
23
|
|
|
28
24
|
function dragOver(dragElement) {
|
|
29
|
-
const
|
|
25
|
+
const customEventType = DRAG_OVER_CUSTOM_EVENT_TYPE;
|
|
30
26
|
|
|
31
|
-
this.
|
|
27
|
+
this.callCustomHandlers(customEventType, dragElement);
|
|
32
28
|
}
|
|
33
29
|
|
|
34
|
-
function
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
this.addEventListener(eventType, handler, element);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
function offDrop(dropHandler, element) {
|
|
42
|
-
const eventType = DROP_EVENT_TYPE,
|
|
43
|
-
handler = dropHandler; ///
|
|
44
|
-
|
|
45
|
-
this.removeEventListener(eventType, handler, element);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
function onDragOut(dragOutHandler, element) {
|
|
49
|
-
const eventType = DRAG_OUT_EVENT_TYPE,
|
|
50
|
-
handler = dragOutHandler; ///
|
|
51
|
-
|
|
52
|
-
this.addEventListener(eventType, handler, element);
|
|
30
|
+
function enableDrop() {
|
|
31
|
+
this.onMouseOut(mouseOutHandler, this);
|
|
32
|
+
this.onMouseOver(mouseOverHandler, this);
|
|
53
33
|
}
|
|
54
34
|
|
|
55
|
-
function
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
this.removeEventListener(eventType, handler, element);
|
|
35
|
+
function disableDrop() {
|
|
36
|
+
this.offMouseOut(mouseOutHandler, this);
|
|
37
|
+
this.offMouseOver(mouseOverHandler, this);
|
|
60
38
|
}
|
|
61
39
|
|
|
62
|
-
function
|
|
63
|
-
const
|
|
64
|
-
|
|
40
|
+
function onCustomDrop(dropCustomHandler, element) {
|
|
41
|
+
const customEventType = DROP_CUSTOM_EVENT_TYPE,
|
|
42
|
+
customHandler = dropCustomHandler; ///
|
|
65
43
|
|
|
66
|
-
this.
|
|
44
|
+
this.onCustomEvent(customEventType, customHandler, element);
|
|
67
45
|
}
|
|
68
46
|
|
|
69
|
-
function
|
|
70
|
-
const
|
|
71
|
-
|
|
47
|
+
function offCustomDrop(dropCustomHandler, element) {
|
|
48
|
+
const customEventType = DROP_CUSTOM_EVENT_TYPE,
|
|
49
|
+
customHandler = dropCustomHandler; ///
|
|
72
50
|
|
|
73
|
-
this.
|
|
51
|
+
this.offCustomEvent(customEventType, customHandler, element);
|
|
74
52
|
}
|
|
75
53
|
|
|
76
|
-
function
|
|
77
|
-
const
|
|
78
|
-
|
|
79
|
-
dragOutHandler = onDragOut, ///
|
|
80
|
-
dragOverHandler = onDragOver; ///
|
|
54
|
+
function onCustomDragOut(dragOutCustomHandler, element) {
|
|
55
|
+
const customEventType = DRAG_OUT_CUSTOM_EVENT_TYPE,
|
|
56
|
+
customHandler = dragOutCustomHandler; ///
|
|
81
57
|
|
|
82
|
-
|
|
83
|
-
dragOutHandler && this.onDragOut(dragOutHandler);
|
|
84
|
-
dragOverHandler && this.onDragOver(dragOverHandler);
|
|
85
|
-
|
|
86
|
-
this.onMouseOut(mouseOutHandler, this);
|
|
87
|
-
this.onMouseOver(mouseOverHandler, this);
|
|
58
|
+
this.onCustomEvent(customEventType, customHandler, element);
|
|
88
59
|
}
|
|
89
60
|
|
|
90
|
-
function
|
|
91
|
-
const
|
|
92
|
-
|
|
93
|
-
dragOutHandler = onDragOut, ///
|
|
94
|
-
dragOverHandler = onDragOver; ///
|
|
95
|
-
|
|
96
|
-
dropHandler && this.offDrop(dropHandler);
|
|
97
|
-
dragOutHandler && this.offDragOut(dragOutHandler);
|
|
98
|
-
dragOverHandler && this.offDragOver(dragOverHandler);
|
|
61
|
+
function offCustomDragOut(dragOutCustomHandler, element) {
|
|
62
|
+
const customEventType = DRAG_OUT_CUSTOM_EVENT_TYPE,
|
|
63
|
+
customHandler = dragOutCustomHandler; ///
|
|
99
64
|
|
|
100
|
-
this.
|
|
101
|
-
this.offMouseOver(mouseOverHandler, this);
|
|
65
|
+
this.offCustomEvent(customEventType, customHandler, element);
|
|
102
66
|
}
|
|
103
67
|
|
|
104
|
-
function
|
|
105
|
-
const
|
|
106
|
-
|
|
107
|
-
eventListeners.forEach((eventListener) => {
|
|
108
|
-
const { handler, element: handlerElement } = eventListener,
|
|
109
|
-
element = this; ///
|
|
68
|
+
function onCustomDragOver(dragOverCustomHandler, element) {
|
|
69
|
+
const customEventType = DRAG_OVER_CUSTOM_EVENT_TYPE,
|
|
70
|
+
customHandler = dragOverCustomHandler; ///
|
|
110
71
|
|
|
111
|
-
|
|
112
|
-
});
|
|
72
|
+
this.onCustomEvent(customEventType, customHandler, element);
|
|
113
73
|
}
|
|
114
74
|
|
|
115
|
-
function
|
|
116
|
-
const
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
forEach(eventListeners, (eventListener, next) => {
|
|
120
|
-
const { handler, element: handlerElement } = eventListener,
|
|
121
|
-
element = this, ///
|
|
122
|
-
done = next; ///
|
|
75
|
+
function offCustomDragOver(dragOverCustomHandler, element) {
|
|
76
|
+
const customEventType = DRAG_OVER_CUSTOM_EVENT_TYPE,
|
|
77
|
+
customHandler = dragOverCustomHandler; ///
|
|
123
78
|
|
|
124
|
-
|
|
125
|
-
}, done);
|
|
79
|
+
this.offCustomEvent(customEventType, customHandler, element);
|
|
126
80
|
}
|
|
127
81
|
|
|
128
82
|
export default {
|
|
129
83
|
drop,
|
|
130
84
|
dragOut,
|
|
131
85
|
dragOver,
|
|
132
|
-
onDrop,
|
|
133
|
-
offDrop,
|
|
134
|
-
onDragOut,
|
|
135
|
-
offDragOut,
|
|
136
|
-
onDragOver,
|
|
137
|
-
offDragOver,
|
|
138
86
|
enableDrop,
|
|
139
87
|
disableDrop,
|
|
140
|
-
|
|
141
|
-
|
|
88
|
+
onCustomDrop,
|
|
89
|
+
offCustomDrop,
|
|
90
|
+
onCustomDragOut,
|
|
91
|
+
offCustomDragOut,
|
|
92
|
+
onCustomDragOver,
|
|
93
|
+
offCustomDragOver
|
|
142
94
|
}
|
|
143
95
|
|
|
144
96
|
function mouseOutHandler(event, element) {
|
package/lib/eventTypes.js
DELETED
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
DRAG_EVENT_TYPE: function() {
|
|
13
|
-
return DRAG_EVENT_TYPE;
|
|
14
|
-
},
|
|
15
|
-
DRAG_OUT_EVENT_TYPE: function() {
|
|
16
|
-
return DRAG_OUT_EVENT_TYPE;
|
|
17
|
-
},
|
|
18
|
-
DRAG_OVER_EVENT_TYPE: function() {
|
|
19
|
-
return DRAG_OVER_EVENT_TYPE;
|
|
20
|
-
},
|
|
21
|
-
DROP_EVENT_TYPE: function() {
|
|
22
|
-
return DROP_EVENT_TYPE;
|
|
23
|
-
},
|
|
24
|
-
START_DRAG_EVENT_TYPE: function() {
|
|
25
|
-
return START_DRAG_EVENT_TYPE;
|
|
26
|
-
},
|
|
27
|
-
STOP_DRAG_EVENT_TYPE: function() {
|
|
28
|
-
return STOP_DRAG_EVENT_TYPE;
|
|
29
|
-
},
|
|
30
|
-
default: function() {
|
|
31
|
-
return _default;
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
var DRAG_EVENT_TYPE = "drag";
|
|
35
|
-
var DROP_EVENT_TYPE = "drop";
|
|
36
|
-
var DRAG_OUT_EVENT_TYPE = "dragout";
|
|
37
|
-
var DRAG_OVER_EVENT_TYPE = "dragover";
|
|
38
|
-
var STOP_DRAG_EVENT_TYPE = "stopdrag";
|
|
39
|
-
var START_DRAG_EVENT_TYPE = "startdrag";
|
|
40
|
-
var _default = {
|
|
41
|
-
DRAG_EVENT_TYPE: DRAG_EVENT_TYPE,
|
|
42
|
-
DROP_EVENT_TYPE: DROP_EVENT_TYPE,
|
|
43
|
-
DRAG_OUT_EVENT_TYPE: DRAG_OUT_EVENT_TYPE,
|
|
44
|
-
DRAG_OVER_EVENT_TYPE: DRAG_OVER_EVENT_TYPE,
|
|
45
|
-
STOP_DRAG_EVENT_TYPE: STOP_DRAG_EVENT_TYPE,
|
|
46
|
-
START_DRAG_EVENT_TYPE: START_DRAG_EVENT_TYPE
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9ldmVudFR5cGVzLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIlwidXNlIHN0cmljdFwiO1xuXG5leHBvcnQgY29uc3QgRFJBR19FVkVOVF9UWVBFID0gXCJkcmFnXCI7XG5leHBvcnQgY29uc3QgRFJPUF9FVkVOVF9UWVBFID0gXCJkcm9wXCI7XG5leHBvcnQgY29uc3QgRFJBR19PVVRfRVZFTlRfVFlQRSA9IFwiZHJhZ291dFwiO1xuZXhwb3J0IGNvbnN0IERSQUdfT1ZFUl9FVkVOVF9UWVBFID0gXCJkcmFnb3ZlclwiO1xuZXhwb3J0IGNvbnN0IFNUT1BfRFJBR19FVkVOVF9UWVBFID0gXCJzdG9wZHJhZ1wiO1xuZXhwb3J0IGNvbnN0IFNUQVJUX0RSQUdfRVZFTlRfVFlQRSA9IFwic3RhcnRkcmFnXCI7XG5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgRFJBR19FVkVOVF9UWVBFLFxuICBEUk9QX0VWRU5UX1RZUEUsXG4gIERSQUdfT1VUX0VWRU5UX1RZUEUsXG4gIERSQUdfT1ZFUl9FVkVOVF9UWVBFLFxuICBTVE9QX0RSQUdfRVZFTlRfVFlQRSxcbiAgU1RBUlRfRFJBR19FVkVOVF9UWVBFXG59O1xuIl0sIm5hbWVzIjpbIkRSQUdfRVZFTlRfVFlQRSIsIkRSQUdfT1VUX0VWRU5UX1RZUEUiLCJEUkFHX09WRVJfRVZFTlRfVFlQRSIsIkRST1BfRVZFTlRfVFlQRSIsIlNUQVJUX0RSQUdfRVZFTlRfVFlQRSIsIlNUT1BfRFJBR19FVkVOVF9UWVBFIl0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7SUFFYUEsZUFBZTtlQUFmQTs7SUFFQUMsbUJBQW1CO2VBQW5CQTs7SUFDQUMsb0JBQW9CO2VBQXBCQTs7SUFGQUMsZUFBZTtlQUFmQTs7SUFJQUMscUJBQXFCO2VBQXJCQTs7SUFEQUMsb0JBQW9CO2VBQXBCQTs7SUFHYixPQU9FO2VBUEY7OztBQVBPLElBQU1MLGtCQUFrQjtBQUN4QixJQUFNRyxrQkFBa0I7QUFDeEIsSUFBTUYsc0JBQXNCO0FBQzVCLElBQU1DLHVCQUF1QjtBQUM3QixJQUFNRyx1QkFBdUI7QUFDN0IsSUFBTUQsd0JBQXdCO0lBRXJDLFdBQWU7SUFDYkosaUJBQUFBO0lBQ0FHLGlCQUFBQTtJQUNBRixxQkFBQUE7SUFDQUMsc0JBQUFBO0lBQ0FHLHNCQUFBQTtJQUNBRCx1QkFBQUE7QUFDRiJ9
|
package/src/eventTypes.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
export const DRAG_EVENT_TYPE = "drag";
|
|
4
|
-
export const DROP_EVENT_TYPE = "drop";
|
|
5
|
-
export const DRAG_OUT_EVENT_TYPE = "dragout";
|
|
6
|
-
export const DRAG_OVER_EVENT_TYPE = "dragover";
|
|
7
|
-
export const STOP_DRAG_EVENT_TYPE = "stopdrag";
|
|
8
|
-
export const START_DRAG_EVENT_TYPE = "startdrag";
|
|
9
|
-
|
|
10
|
-
export default {
|
|
11
|
-
DRAG_EVENT_TYPE,
|
|
12
|
-
DROP_EVENT_TYPE,
|
|
13
|
-
DRAG_OUT_EVENT_TYPE,
|
|
14
|
-
DRAG_OVER_EVENT_TYPE,
|
|
15
|
-
STOP_DRAG_EVENT_TYPE,
|
|
16
|
-
START_DRAG_EVENT_TYPE
|
|
17
|
-
};
|