Revert original positions if AJAX request fails

Related to https://github.com/SortableJS/Vue.Draggable/issues/45#issuecomment-313503906

Hey, I would like to know how is it possible to cancel a drop and so revert to original positions, if my AJAX request fails.

I know that I can hook onMoveCallback and return false to revert to original positions, but AJAX request works asynchronously, not synchronously…

So I found an example with Sortable only (https://github.com/RubaXa/Sortable/issues/266) which use onUpdate event, but I don’t know how to reproduce it with Vue.Draggable.

Here is my code:

<template>
  <div>
    <draggable
      v-model="items"
      :options="options" 
      @start="onDraggableStart" 
      @update="onDraggableUpdate"
    >
      <div v-for="item in items">{{ item.name }}</div>
    </draggable>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {
        disabled: false,
      }
    }
  },
  methods: {
    onDraggableStart() {
      // will not work because I don't have access to Sortable instance
      this.currentOrder = this.toArray();
    },
    onDraggableUpdate() {
      this.options.disabled = true;

      axios
        .post(...)
        .then(() => ())
        .catch((error) => {
           // Revert order
          this.sort(this.currentOrder); // will not work too
        })
        .finally(() => this.options.disabled = false);
    },
  }
}
</script>

Maybe I’m missing something… Thanks!

[Kocal]

Well… When I was writing my issue, I thought about a dirty solution, but it’s working as expected…

I need to specify a ref to <draggable>, and now I can access private Sortable instance and make my things like that:

<template>
  <div>
    <draggable
      ref="draggable"
      v-model="items"
      :options="options" 
      @start="onDraggableStart" 
      @update="onDraggableUpdate"
    >
      <div v-for="item in items">{{ item.name }}</div>
    </draggable>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {
        disabled: false,
      }
    }
  },
  methods: {
    onDraggableStart() {
      this.currentOrder = this.$refs.draggable._sortable.toArray();
    },
    onDraggableUpdate() {
      this.options.disabled = true;

      axios
        .post(...)
        .then(() => ())
        .catch((error) => {
           // Revert order
          this.$refs.draggable._sortable.sort(this.draggableCurrentOrder);
        })
        .finally(() => this.options.disabled = false);
    },
  }
}
</script>

I think you can close this issue, and put label « question » I guess.

[serdarcevher]

2020 update: In addition to @rolandjlevy’s modifications, I also needed to modify the “event.newIndex” part to “event.moved.newIndex” (and the same for the oldIndex). So the code became:

onDraggableUpdate(event) {
    ...
    .catch(error => {
       let moved = this.list.splice(event.moved.newIndex, 1);
       this.list.splice(event.moved.oldIndex, 0, moved[0]);
    })
    .finally( ...);
    ...
}