How to add the event listener to sortable items?

[diduweiwu]

Hi guys, I'm using vue-sortable and it's really convenient to build a sortable grid. But I'm confused about how to add the callback function when I finish the sorting action. Could you give a demo for that? BTW, I use it in HTML5 not NodeJS.

Thanks.

[PavelCherkashinCreuna]

Hi @gaoyuan121 this should work v-sortable="{handle: '.handle', onEnd: endSorting}"
The list of all options is here https://github.com/RubaXa/Sortable#options

[sagalbot]

Hi @gaoyuan121,

Here is an example for you http://jsbin.com/cicewo/4/edit?html,js,output.

new Vue({
  el: 'body',
  data: {
    list: ['Foo', 'Bar', 'Baz']
  },
  methods: {
    onSortUpdate: function (event) {
      this.list.splice(event.newIndex, 0, this.list.splice(event.oldIndex, 1)[0])
    }
  }
});

<ul class="list-group" v-sortable="{ onUpdate: onSortUpdate }">
    <li class="list-group-item" v-for="item in list">{{ item }}</li>
 </ul>

I need to add this to the docs, as it's common use case.

[weblee]

I would like to use the sortable in a number of places but its the same logic where I use it.

I want to use the data attribute instead of passing in the attributes. Can you bind the onEnd methods in the data attribute? I have tried a whole bunch of things but I am unable to get it to work ie..

new Vue({
  el: 'body',
  data: {
    list: ['Foo', 'Bar', 'Baz'],
    sortOptions: {
      onEnd: this.onSortUpdate() // Errors Out ('endSorting' of undefined)
      onEnd: onSortUpdate() // Errors Out  (endSorting is not defined)
      onEnd: onSortUpdate // Errors Out  (endSorting is not defined)
      onEnd: function() {
        this.onSortUpdate() //  etc.. Still no good
      }
    }
  },
  methods: {
    onSortUpdate: function (event) {
      this.list.splice(event.newIndex, 0, this.list.splice(event.oldIndex, 1)[0])
    }
  }
});

<ul class="list-group" v-sortable="sortOptions">
    <li class="list-group-item" v-for="item in list">{{ item }}</li>
 </ul>

[rickycheers]

@weblee I'm new to vue.js and I was running into the same use case as you. I was able to achieve that doing the following. Hope it helps.

new Vue({
  el: 'body',
  data: function(){
    var that = this;
    return {
      list: ['Foo', 'Bar', 'Baz'],
      sortOptions: {
        onEnd: that.onSortUpdate
      }
    }
  },
  methods: {
    onSortUpdate: function (event) {
      this.list.splice(event.newIndex, 0, this.list.splice(event.oldIndex, 1)[0])
    }
  }
});

[sagalbot]

@weblee @rickycheers there's definitely some weird this context issues happening there. I've been playing with it tonight but can't seem to figure out where the context is lost.

[rickycheers]

@weblee I updated @sagalbot's example to use a reference of the options object instead of an object literal in thev-sortable directive

http://jsbin.com/zubule/edit?html,js,output