Skip to content

Commit 43bd3fe

Browse files
Added capture modifier (@move.capture) support for onMove event (#56)
* Added capture modifier support onMove event * Added type to build project * Add comment on `attrs` * Added passing arguments on capture method * Updated README.md Co-authored-by: Max Leiter <[email protected]>
1 parent 7c0a4fe commit 43bd3fe

File tree

2 files changed

+6
-2
lines changed

2 files changed

+6
-2
lines changed

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ You can listen to Sortable events by adding the listeners to the `Sortable` comp
9090
@remove="(event: Sortable.SortableEvent) => void"
9191
@filter="(event: Sortable.SortableEvent) => void"
9292
@move="(event: Sortable.MoveEvent, event2: Event) => void"
93+
@move.capture="(event: Sortable.MoveEvent, event2: Event) => boolean | -1 | 1"
9394
@clone="(event: Sortable.SortableEvent) => void"
9495
>
9596
```

src/components/Sortable.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { ref, PropType, watch, onUnmounted, computed } from "vue";
2+
import { ref, PropType, watch, onUnmounted, computed, useAttrs } from "vue";
33
import Sortable, { SortableOptions } from "sortablejs";
44
import type { AutoScrollOptions } from "sortablejs/plugins";
55
@@ -63,6 +63,8 @@ const emit = defineEmits<{
6363
(eventName: "change", evt: Sortable.SortableEvent): void;
6464
}>();
6565
66+
const attrs = useAttrs()
67+
6668
const containerRef = ref<HTMLElement | null>(null);
6769
const sortable = ref<Sortable | null>(null);
6870
const getKey = computed(() => {
@@ -84,7 +86,8 @@ watch(containerRef, (newDraggable) => {
8486
onSort: (event) => emit("sort", event),
8587
onRemove: (event) => emit("remove", event),
8688
onFilter: (event) => emit("filter", event),
87-
onMove: (event, originalEvent) => emit("move", event, originalEvent),
89+
// See https://github.com/MaxLeiter/sortablejs-vue3/pull/56 for context on `attrs`.
90+
onMove: (event, originalEvent) => "onMoveCapture" in attrs ? (<(event: Sortable.MoveEvent, originalEvent: Event) => void>attrs.onMoveCapture)(event, originalEvent) : emit("move", event, originalEvent),
8891
onClone: (event) => emit("clone", event),
8992
onChange: (event) => emit("change", event),
9093
});

0 commit comments

Comments
 (0)