Skip to content

Commit e0cc188

Browse files
palagadecMaxLeiter
palagadec
and
MaxLeiter
authored
✨ - Implement default AutoScroll plugin (#53)
* ✨ - Implement default AutoScroll plugin * HelloWorld: update import to `type` * Sortable.vue: update import to `type` * 📱 - Wrap settings Co-authored-by: Max Leiter <[email protected]>
1 parent 469c7f4 commit e0cc188

File tree

2 files changed

+165
-52
lines changed

2 files changed

+165
-52
lines changed

‎src/components/HelloWorld.vue

Lines changed: 163 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import Sortable from "./Sortable.vue";
33
import { computed, ref } from "vue";
44
import type { SortableOptions } from "sortablejs";
5+
import type { AutoScrollOptions } from "sortablejs/plugins";
56
67
const elements = computed(() => {
78
return [
@@ -37,6 +38,74 @@ const elements = computed(() => {
3738
id: "3",
3839
text: "Three",
3940
},
41+
{
42+
id: "4",
43+
text: "Four",
44+
},
45+
{
46+
id: "5",
47+
text: "Five",
48+
},
49+
{
50+
id: "6",
51+
text: "Six",
52+
},
53+
{
54+
id: "7",
55+
text: "Seven",
56+
},
57+
{
58+
id: "8",
59+
text: "Eight",
60+
},
61+
{
62+
id: "9",
63+
text: "Nine",
64+
},
65+
{
66+
id: "10",
67+
text: "Ten",
68+
},
69+
{
70+
id: "11",
71+
text: "Eleven",
72+
},
73+
{
74+
id: "12",
75+
text: "Twelve",
76+
},
77+
{
78+
id: "13",
79+
text: "Thirteen",
80+
},
81+
{
82+
id: "14",
83+
text: "Fourteen",
84+
},
85+
{
86+
id: "15",
87+
text: "Fifteen",
88+
},
89+
{
90+
id: "16",
91+
text: "Sixteen",
92+
},
93+
{
94+
id: "17",
95+
text: "Seventeen",
96+
},
97+
{
98+
id: "18",
99+
text: "Eighteen",
100+
},
101+
{
102+
id: "19",
103+
text: "Nineteen",
104+
},
105+
{
106+
id: "20",
107+
text: "Twenty",
108+
},
40109
];
41110
});
42111
@@ -49,13 +118,20 @@ const logEvent = (evt: Event, evt2?: Event) => {
49118
};
50119
51120
const animating = ref(true);
121+
const scrollSensitivity = ref(50);
122+
const scrollSpeed = ref(10);
52123
53-
const options = computed<SortableOptions>(() => {
124+
const options = computed<SortableOptions | AutoScrollOptions>(() => {
54125
return {
55126
draggable: ".draggable",
56127
animation: animating.value ? 150 : 0,
57128
ghostClass: "ghost",
58129
dragClass: "drag",
130+
scroll: true,
131+
forceFallback: true,
132+
scrollSensitivity: scrollSensitivity.value,
133+
scrollSpeed: scrollSpeed.value,
134+
bubbleScroll: true,
59135
};
60136
});
61137
@@ -87,59 +163,95 @@ main {
87163
.drag {
88164
background: #f5f5f5;
89165
}
166+
167+
.wrapper {
168+
max-height: 400px;
169+
overflow-y: auto;
170+
}
171+
172+
.settings {
173+
padding: 1rem;
174+
display: flex;
175+
flex-wrap: wrap;
176+
align-items: center;
177+
gap: 20px;
178+
}
179+
180+
.settings .range {
181+
display: flex;
182+
flex-direction: column;
183+
}
184+
.settings .range p {
185+
margin: 0;
186+
}
90187
</style>
91188

92189
<template>
93190
<main>
94-
<button @click="onPress">Toggle animations</button>
95-
<Sortable
96-
:list="elements"
97-
item-key="id"
98-
:options="options"
99-
@change="logEvent"
100-
@choose="logEvent"
101-
@unchoose="logEvent"
102-
@start="logEvent"
103-
@end="logEvent"
104-
@add="logEvent"
105-
@update="logEvent"
106-
@sort="logEvent"
107-
@remove="logEvent"
108-
@filter="logEvent"
109-
@move="logEvent"
110-
@clone="logEvent"
111-
>
112-
<template #item="{ element, index }">
113-
<div class="draggable" :key="element.id">
114-
{{ element.text }}
115-
<Sortable
116-
v-if="element.children"
117-
:list="element.children"
118-
:item-key="(item) => item.id"
119-
:options="options"
120-
@change="logEvent"
121-
@choose="logEvent"
122-
@unchoose="logEvent"
123-
@start="logEvent"
124-
@end="logEvent"
125-
@add="logEvent"
126-
@update="logEvent"
127-
@sort="logEvent"
128-
@remove="logEvent"
129-
@filter="logEvent"
130-
@move="logEvent"
131-
@clone="logEvent"
132-
>
133-
<template #item="{ element, index }">
134-
<div class="draggable" :key="element.id">
135-
{{ element.text }}
136-
</div>
137-
</template>
138-
</Sortable>
139-
</div>
140-
</template>
141-
</Sortable>
191+
<div class="settings">
192+
<button @click="onPress">Toggle animations</button>
193+
<div class="range">
194+
<input
195+
type="range"
196+
min="0"
197+
max="200"
198+
v-model.number="scrollSensitivity"
199+
/>
200+
<p>scrollSensitivity : {{ scrollSensitivity }}px</p>
201+
</div>
202+
<div class="range">
203+
<input type="range" min="0" max="100" v-model.number="scrollSpeed" />
204+
<p>scrollSpeed : {{ scrollSpeed }}px</p>
205+
</div>
206+
</div>
207+
<div class="wrapper">
208+
<Sortable
209+
:list="elements"
210+
item-key="id"
211+
:options="options"
212+
@change="logEvent"
213+
@choose="logEvent"
214+
@unchoose="logEvent"
215+
@start="logEvent"
216+
@end="logEvent"
217+
@add="logEvent"
218+
@update="logEvent"
219+
@sort="logEvent"
220+
@remove="logEvent"
221+
@filter="logEvent"
222+
@move="logEvent"
223+
@clone="logEvent"
224+
>
225+
<template #item="{ element, index }">
226+
<div class="draggable" :key="element.id">
227+
{{ element.text }}
228+
<Sortable
229+
v-if="element.children"
230+
:list="element.children"
231+
:item-key="(item) => item.id"
232+
:options="options"
233+
@change="logEvent"
234+
@choose="logEvent"
235+
@unchoose="logEvent"
236+
@start="logEvent"
237+
@end="logEvent"
238+
@add="logEvent"
239+
@update="logEvent"
240+
@sort="logEvent"
241+
@remove="logEvent"
242+
@filter="logEvent"
243+
@move="logEvent"
244+
@clone="logEvent"
245+
>
246+
<template #item="{ element, index }">
247+
<div class="draggable" :key="element.id">
248+
{{ element.text }}
249+
</div>
250+
</template>
251+
</Sortable>
252+
</div>
253+
</template>
254+
</Sortable>
255+
</div>
142256
</main>
143257
</template>
144-
145-
<style scoped></style>

‎src/components/Sortable.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<script setup lang="ts">
22
import { ref, PropType, watch, onUnmounted, computed } from "vue";
33
import Sortable, { SortableOptions } from "sortablejs";
4+
import type { AutoScrollOptions } from "sortablejs/plugins";
45
56
type SortableOptionsProp = Omit<
6-
SortableOptions,
7+
SortableOptions | AutoScrollOptions,
78
| "onUnchoose"
89
| "onChoose"
910
| "onStart"

0 commit comments

Comments
 (0)