/
index.js
61 lines (49 loc) · 1.75 KB
/
index.js
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
// eslint-disable-next-line import/no-unresolved
import {Sortable, Plugins} from '@shopify/draggable';
import matchMirrorSize from '../../../scripts/utils/match-mirror-size';
const Classes = {
draggable: 'StackedListItem--isDraggable',
capacity: 'draggable-container-parent--capacity',
};
export default function MultipleContainers() {
const containers = document.querySelectorAll('#MultipleContainers .StackedList');
if (containers.length === 0) {
return false;
}
const sortable = new Sortable(containers, {
draggable: `.${Classes.draggable}`,
mirror: {
constrainDimensions: true,
},
plugins: [Plugins.Releasable],
});
const containerTwoCapacity = 3;
const containerTwoParent = sortable.containers[1].parentNode;
let currentMediumChildren;
let capacityReached;
let lastOverContainer;
// --- Draggable events --- //
sortable.on('drag:start', (evt) => {
currentMediumChildren = sortable.getDraggableElementsForContainer(sortable.containers[1]).length;
capacityReached = currentMediumChildren === containerTwoCapacity;
lastOverContainer = evt.sourceContainer;
containerTwoParent.classList.toggle(Classes.capacity, capacityReached);
});
sortable.on('sortable:sort', (evt) => {
if (!capacityReached) {
return;
}
const sourceIsCapacityContainer = evt.dragEvent.sourceContainer === sortable.containers[1];
if (!sourceIsCapacityContainer && evt.dragEvent.overContainer === sortable.containers[1]) {
evt.cancel();
}
});
sortable.on('sortable:sorted', (evt) => {
if (lastOverContainer === evt.dragEvent.overContainer) {
return;
}
matchMirrorSize(evt.dragEvent, Classes.draggable);
lastOverContainer = evt.dragEvent.overContainer;
});
return sortable;
}