Skip to content

Commit ae055b2

Browse files
nolimits4webnolimits4web
committed
feat(sortable): new sortableMove event to trigger during sortable item drag
1 parent 6fe117a commit ae055b2

File tree

5 files changed

+40
-3
lines changed

5 files changed

+40
-3
lines changed

‎src/core/components/sortable/sortable.d.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,9 @@ export namespace Sortable {
3737
/** Event will be triggered when sortable mode is disabled */
3838
sortableDisable: (listEl: HTMLElement) => void;
3939
/** Event will be triggered after user release currently sorting element in new position. indexes is an object with from and to properties with from/to index numbers of sorted list item */
40-
sortableSort: (listEl: HTMLElement, indexes: SortIndexes) => void;
40+
sortableSort: (itemEl: HTMLElement, indexes: SortIndexes, listEl: HTMLElement) => void;
41+
/** Event will be triggered on every list item move during sorting */
42+
sortableMove: (itemEl: HTMLElement, listEl: HTMLElement) => void;
4143
}
4244
}
4345

‎src/core/components/sortable/sortable.js‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,23 +124,37 @@ const Sortable = {
124124
const currentElHeight = $currentEl.height();
125125
const sortingElOffset = sortingElOffsetLocal + translate;
126126

127+
let currentTranslate;
128+
const prevTranslate = $currentEl[0].f7Translate;
129+
127130
if (
128131
sortingElOffset >= currentElOffset - currentElHeight / 2 &&
129132
$sortingEl.index() < $currentEl.index()
130133
) {
131-
$currentEl.transform(`translate3d(0, ${-sortingElHeight}px,0)`);
134+
currentTranslate = -sortingElHeight;
135+
$currentEl.transform(`translate3d(0, ${currentTranslate}px,0)`);
132136
$insertAfterEl = $currentEl;
133137
$insertBeforeEl = undefined;
134138
} else if (
135139
sortingElOffset <= currentElOffset + currentElHeight / 2 &&
136140
$sortingEl.index() > $currentEl.index()
137141
) {
138-
$currentEl.transform(`translate3d(0, ${sortingElHeight}px,0)`);
142+
currentTranslate = sortingElHeight;
143+
$currentEl[0].f7Translate = currentTranslate;
144+
$currentEl.transform(`translate3d(0, ${currentTranslate}px,0)`);
139145
$insertAfterEl = undefined;
140146
if (!$insertBeforeEl) $insertBeforeEl = $currentEl;
141147
} else {
148+
currentTranslate = undefined;
142149
$currentEl.transform('translate3d(0, 0%,0)');
143150
}
151+
152+
if (prevTranslate !== currentTranslate) {
153+
$currentEl.trigger('sortable:move');
154+
app.emit('sortableMove', $sortableContainer[0], $currentEl[0]);
155+
}
156+
157+
$currentEl[0].f7Translate = currentTranslate;
144158
});
145159
}
146160
function handleTouchEnd() {

‎src/react/components/list.jsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ import { VirtualList } from 'framework7/types';
5757
onSortableEnable? : (...args: any[]) => void
5858
onSortableDisable? : (...args: any[]) => void
5959
onSortableSort? : (sortData?: any) => void
60+
onSortableMove? : (itemEl?: any) => void
6061
onTabShow? : (el?: HTMLElement) => void
6162
onTabHide? : (el?: HTMLElement) => void
6263
ref?: React.MutableRefObject<{el: HTMLElement | null; f7VirtualList: () => VirtualList.VirtualList}>;
@@ -124,6 +125,11 @@ const List = forwardRef((props, ref) => {
124125
emit(props, 'sortableSort', sortData);
125126
};
126127

128+
const onSortableMove = (el, listEl) => {
129+
if (elRef.current !== listEl) return;
130+
emit(props, 'sortableMove', el);
131+
};
132+
127133
useImperativeHandle(ref, () => ({
128134
el: elRef.current,
129135
f7VirtualList: () => f7VirtualList.current,
@@ -136,6 +142,7 @@ const List = forwardRef((props, ref) => {
136142
f7.on('sortableEnable', onSortableEnable);
137143
f7.on('sortableDisable', onSortableDisable);
138144
f7.on('sortableSort', onSortableSort);
145+
f7.on('sortableMove', onSortableMove);
139146
});
140147
};
141148

@@ -144,6 +151,7 @@ const List = forwardRef((props, ref) => {
144151
f7.off('sortableEnable', onSortableEnable);
145152
f7.off('sortableDisable', onSortableDisable);
146153
f7.off('sortableSort', onSortableSort);
154+
f7.off('sortableMove', onSortableMove);
147155
};
148156

149157
const onMount = () => {

‎src/svelte/components/list.svelte‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,10 @@
131131
if (listEl !== el) return;
132132
emit('sortableSort', [sortData]);
133133
}
134+
function onSortableMove(listItemEl, listEl) {
135+
if (listEl !== el) return;
136+
emit('sortableMove', [listEl]);
137+
}
134138
135139
useTab(() => el, emit);
136140
@@ -139,6 +143,7 @@
139143
app.f7.on('sortableEnable', onSortableEnable);
140144
app.f7.on('sortableDisable', onSortableDisable);
141145
app.f7.on('sortableSort', onSortableSort);
146+
app.f7.on('sortableMove', onSortableMove);
142147
143148
if (!virtualList) return;
144149
const vlParams = virtualListParams || {};
@@ -178,6 +183,7 @@
178183
app.f7.off('sortableEnable', onSortableEnable);
179184
app.f7.off('sortableDisable', onSortableDisable);
180185
app.f7.off('sortableSort', onSortableSort);
186+
app.f7.off('sortableMove', onSortableMove);
181187
182188
if (f7VirtualList && f7VirtualList.destroy) {
183189
f7VirtualList.destroy();

‎src/vue/components/list.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export default {
6262
'sortable:enable',
6363
'sortable:disable',
6464
'sortable:sort',
65+
'sortable:move',
6566
'virtual:itembeforeinsert',
6667
'virtual:beforeclear',
6768
'virtual:itemsbeforeinsert',
@@ -88,6 +89,10 @@ export default {
8889
if (elRef.value !== listEl) return;
8990
emit('sortable:sort', sortData);
9091
};
92+
const onSortableMove = (el, listEl) => {
93+
if (elRef.value !== listEl) return;
94+
emit(props, 'sortable:move', el);
95+
};
9196
9297
useTab(elRef, emit);
9398
@@ -96,6 +101,7 @@ export default {
96101
f7.on('sortableEnable', onSortableEnable);
97102
f7.on('sortableDisable', onSortableDisable);
98103
f7.on('sortableSort', onSortableSort);
104+
f7.on('sortableMove', onSortableMove);
99105
100106
if (!props.virtualList) return;
101107
const vlParams = props.virtualListParams || {};
@@ -136,6 +142,7 @@ export default {
136142
f7.off('sortableEnable', onSortableEnable);
137143
f7.off('sortableDisable', onSortableDisable);
138144
f7.off('sortableSort', onSortableSort);
145+
f7.off('sortableMove', onSortableMove);
139146
140147
if (!(props.virtualList && f7VirtualList)) return;
141148
if (f7VirtualList.destroy) f7VirtualList.destroy();

0 commit comments

Comments
 (0)