🐛 - Move onEnd event to the end of event queue (#65)

see: SortableJS/Sortable#1184

Author: palagadec

src/components/HelloWorld.vue

@@ -109,6 +109,8 @@ const elements = computed(() => {
   ];
 });
 
+const sortable = ref<InstanceType<typeof Sortable> | null>(null);
+
 const logEvent = (evt: Event, evt2?: Event) => {
   if (evt2) {
     console.log(evt, evt2);
@@ -117,6 +119,11 @@ const logEvent = (evt: Event, evt2?: Event) => {
   }
 };
 
+const logClick = (evt: Event) => {
+  if (sortable.value?.isDragging) return;
+  logEvent(evt);
+};
+
 const animating = ref(true);
 const scrollSensitivity = ref(50);
 const scrollSpeed = ref(10);
@@ -221,9 +228,10 @@ main {
         @filter="logEvent"
         @move="logEvent"
         @clone="logEvent"
+        ref="sortable"
       >
         <template #item="{ element, index }">
-          <div class="draggable" :key="element.id">
+          <div class="draggable" :key="element.id" @click="logClick">
             {{ element.text }}
             <Sortable
               v-if="element.children"

src/components/Sortable.vue

@@ -65,6 +65,7 @@ const emit = defineEmits<{
 
 const attrs = useAttrs();
 
+const isDragging = ref(false);
 const containerRef = ref<HTMLElement | null>(null);
 const sortable = ref<Sortable | null>(null);
 const getKey = computed(() => {
@@ -73,16 +74,30 @@ const getKey = computed(() => {
   return props.itemKey;
 });
 
-defineExpose({ containerRef, sortable: <Ref<Sortable | null>>sortable });
+defineExpose({
+  containerRef,
+  sortable: <Ref<Sortable | null>>sortable,
+  isDragging,
+});
 
 watch(containerRef, (newDraggable) => {
   if (newDraggable) {
     sortable.value = new Sortable(newDraggable, {
       ...props.options,
       onChoose: (event) => emit("choose", event),
       onUnchoose: (event) => emit("unchoose", event),
-      onStart: (event) => emit("start", event),
-      onEnd: (event) => emit("end", event),
+      onStart: (event) => {
+        isDragging.value = true;
+        emit("start", event);
+      },
+      onEnd: (event) => {
+        // This is a hack to move the event to the end of the event queue.
+        // cf this issue: https://github.com/SortableJS/Sortable/issues/1184
+        setTimeout(() => {
+          isDragging.value = false;
+          emit("end", event);
+        });
+      },
       onAdd: (event) => emit("add", event),
       onUpdate: (event) => emit("update", event),
       onSort: (event) => emit("sort", event),
@@ -117,7 +132,6 @@ onUnmounted(() => {
     sortable.value = null;
   }
 });
-
 </script>
 
 <template>