xxxxxxxxxx1
<div id="scrollable-container" style="overflow-y:scroll; height:375px; width:500px;">2
3
4
<div data-mdb-sortable="sortable" class="sortable-list">5
<div class="sortable-item" data-mdb-container="#scrollable-container">Item 1</div>6
<div class="sortable-item" data-mdb-container="#scrollable-container">Item 2</div>7
<div class="sortable-item" data-mdb-container="#scrollable-container">Item 3</div>8
<div class="sortable-item" data-mdb-container="#scrollable-container">Item 4</div>9
<div class="sortable-item" data-mdb-container="#scrollable-container">Item 5</div>10
<div class="sortable-item" data-mdb-container="#scrollable-container">Item 6</div>11
<div class="sortable-item" data-mdb-container="#scrollable-container">Item 7</div>12
<div class="sortable-item" data-mdb-container="#scrollable-container">Item 8</div>13
<div class="sortable-item" data-mdb-container="#scrollable-container">Item 9</div>14
<div class="sortable-item" data-mdb-container="#scrollable-container">Item 10</div>15
<div class="sortable-item" data-mdb-container="#scrollable-container">Item 11</div>16
<div class="sortable-item" data-mdb-container="#scrollable-container">Item 12</div>17
<div class="sortable-item" data-mdb-container="#scrollable-container">Item 13</div>18
</div>19
</div>xxxxxxxxxx1
2
.draggable-element {3
display: flex;4
width: 200px;5
height: 200px;6
justify-content: center;7
align-items: center;8
background-color: white;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 #ccc;23
min-height: 60px;24
display: block;25
background: #fff;26
border-radius: 4px;27
}28
29
.sortable-item {30
padding: 20px 10px;31
border-bottom: solid 1px #ccc;32
color: rgba(0, 0, 0, 0.87);33
background: #fff;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 #ccc;45
border-end: 1px solid #ccc;46
}47
48
#sortable-grid {49
border: none;50
}51
52
#sortable-grid .sortable-item {53
width: 125px;54
height: 125px;55
margin: 15px;56
border: 1px solid #ccc;57
text-align: center;58
}59
60
#sortable-condition-1,61
#sortable-condition-2 {62
width: 500px;63
max-width: 100%;64
border: solid 1px #ccc;65
min-height: 60px;66
display: block;67
background: #fff;68
border-radius: 4px;69
}70
1
1
Console errors: 0