xxxxxxxxxx
1
<div data-mdb-sortable-init class="sortable-list" id="sortable"></div>
xxxxxxxxxx
1
<style>
2
.draggable-element {
3
display: flex;
4
width: 200px;
5
height: 200px;
6
justify-content: center;
7
align-items: center;
8
background-color: var(--mdb-secondary-bg-subtle);
9
}
10
11
.draggable-drag-ico {
12
position: absolute;
13
top: 10px;
14
right: 10px;
15
font-size: 1.5rem;
16
color: grey;
17
}
18
19
.sortable-list {
20
width: 500px;
21
max-width: 100%;
22
border: solid 1px var(--mdb-secondary-border-subtle);
23
min-height: 60px;
24
display: block;
25
background: var(--mdb-secondary-bg-subtle);
26
border-radius: 4px;
27
}
28
29
.sortable-item {
30
padding: 20px 10px;
31
border-bottom: solid 1px var(--mdb-secondary-border-subtle);
32
color: var(--mdb-body-color);
33
background: var(--mdb-secondary-bg-subtle);
34
display: flex;
35
flex-direction: row;
36
align-items: center;
37
justify-content: space-between;
38
user-select: none;
39
}
40
41
#sortable-horizontal .sortable-item {
42
width: 100%;
43
border-bottom: none;
44
border-left: 1px solid var(--mdb-secondary-border-subtle);
45
}
46
47
#sortable-grid {
48
border: none;
49
}
50
51
#sortable-grid .sortable-item {
52
width: 125px;
53
height: 125px;
54
margin: 15px;
55
border: 1px solid var(--mdb-secondary-border-subtle);
56
text-align: center;
57
}
58
59
#sortable-condition-1,
60
#sortable-condition-2 {
61
width: 500px;
62
max-width: 100%;
63
border: solid 1px var(--mdb-secondary-border-subtle);
64
min-height: 60px;
65
display: block;
66
background: var(--mdb-secondary-bg-subtle);
67
border-radius: 4px;
68
}
69
70
[data-mdb-theme="dark"] .col-example {
71
background-color: #212529;
72
border: 1px solid #404040;
73
}
74
.img-transition {
75
transition-duration: .3s;
76
transition-property: opacity;
77
transition-timing-function: cubic-bezier(.4,0,.2,1);
78
}
79
80
.img-light, [data-mdb-theme="dark"] .img-dark {
81
opacity: 1;
82
}
83
84
.img-dark, [data-mdb-theme="dark"] .img-light {
85
opacity: 0;
86
}
87
88
</style>
89
xxxxxxxxxx
1
// Sortable
2
const sortableEl = document.getElementById('sortable');
3
const instanceSortable = new DragAndDrop.Sortable(sortableEl);
4
for(i=1;i<=5;i++){
5
const newElement = document.createElement('div');
6
newElement.classList.add('sortable-item');
7
newElement.textContent = 'New Element '+i;
8
instanceSortable.addItem(newElement);
9
}
Console errors: 0