Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

change event triggers different from docs #25

Closed
jongmin4943 opened this issue Jun 1, 2023 · 1 comment
Closed

change event triggers different from docs #25

jongmin4943 opened this issue Jun 1, 2023 · 1 comment

Comments

@jongmin4943
Copy link

jongmin4943 commented Jun 1, 2023

docs for change event says Triggered when an item is dragged and changes position.
However, change event triggers when dragging without change actual position like move event.
As far as I remember correctly, change event triggers when an item is dropped to different position.

<template>
  <draggable
    v-model="list"
    :tag="tag"
    :group="group"
    :move="move"
    :fallback-tolerance="3"
    :force-fallback="true"
    :fallback-on-body="true"
    :disabled="disabled"
    @start="onStart"
    @end="onEnd"
    @change="onChange"
    @update="onUpdated"
    @move="onMove"
    @dragover.prevent
  >
    <slot></slot>
  </draggable>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    group: string;
    list?: Array<any>;
    tag?: string;
    option?: any;
    move?: (event: any, originEvent: any) => void;
    disabled?: boolean;
  }>(),
  {
    list: () => [],
    tag: "div",
    option: undefined,
    move: undefined,
    disabled: false,
  }
);
const { list } = toRefs(props);
const emits = defineEmits<{
  (e: "start", value: any): void;
  (e: "end", value: any): void;
  (e: "change", value: any): void;
}>();

const onStart = (event: any) => {
  emits("start", event);
  console.log("start : ", event);
};

const onEnd = (event: any) => {
  emits("end", event);
  console.log("end : ", event);
};

const onChange = (event: any) => {
  console.log("onChange event : ", event);
  emits("change", event);
};
const onUpdated = (event: any) => {
  console.log("onUpdated event : ", event);
  // emits("change", event);
};
const onMove = (event: any, b: any, c: any) => {
  console.log("onMove event : ", event, b, c);
  // emits("change", event);
};
</script>

image

@jongmin4943
Copy link
Author

sorry, it was my misunderstanding.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant