b4dQuetions b4dQuetions - 5 months ago 478
jQuery Question

Make drag & drop sort order in Vue.js start at 1, not 0

I have a problem with sort order using drag & drop in Vue.js. My problem is how can I make the sort order begin from number 1, not from number 0? With my current code, after I drag & drop, the element order numbers change from starting with 1 to starting with 0.

Here is my current code:



new Vue({
el: '#app',
template: '#dragdrop',
data() {
return {
list: [
{name: 'Item 1', id: 1, order: 1},
{name: 'Item 2', id: 2, order: 2},
{name: 'Item 3', id: 3, order: 3},
{name: 'Item 4', id: 4, order: 4},
{name: 'Item 5', id: 5, order: 5},
{name: 'Item 6', id: 6, order: 6},
],
}
},
ready() {
var vm = this;
Sortable.create(document.getElementById('sort'), {
draggable: 'li.sort-item',
ghostClass: "sort-ghost",
animation: 80,
onUpdate: function(evt) {
console.log('dropped (Sortable)');
vm.reorder(evt.oldIndex, evt.newIndex);
}
});
},
methods: {
reorder(oldIndex, newIndex) {
// move the item in the underlying array
this.list.splice(newIndex, 0, this.list.splice(oldIndex, 1)[0]);
// update order property based on position in array
this.list.forEach(function(item, index){
item.order = index;
});
}
}
});

ul.sort {
list-style: none;
padding: 0;
margin: 30px;
}

li.sort-item {
padding: 10px;
width: 25%;
float: left;
margin: 0 10px 10px 0;
background: #EFEFEF;
border: solid 1px #CCC;
}

.sort-ghost {
opacity: 0.3;
transition: all 0.7s ease-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>

<div id="app">
<dragdrop></dragdrop>
</div>

<template id="dragdrop">
<ul id="sort" class="sort cf">
<li class="sort-item" order="{{ item.order }}" v-for="item in list">
{{ item.name }} - ({{ item.order}})
</li>
</ul>
</template>





I tried this:

this.list.splice(newIndex, 1, this.list.splice(oldIndex, 1)[1]);


but it doesn’t work.

Answer

In this part of the JS:

// update order property based on position in array
this.list.forEach(function(item, index){
  item.order = index;
});

Just change the third line to this:

item.order = index + 1;

The full working code:

new Vue({
  el: '#app',
  template: '#dragdrop',
  data() {
    return {
      list: [
      	{name: 'Item 1', id: 1, order: 1}, 
        {name: 'Item 2', id: 2, order: 2}, 
        {name: 'Item 3', id: 3, order: 3}, 
        {name: 'Item 4', id: 4, order: 4}, 
        {name: 'Item 5', id: 5, order: 5}, 
        {name: 'Item 6', id: 6, order: 6}, 
       ],
    }
  },
  ready() {
  	var vm = this;
    Sortable.create(document.getElementById('sort'), {
      draggable: 'li.sort-item',
      ghostClass: "sort-ghost",
      animation: 80,
      onUpdate: function(evt) {
        console.log('dropped (Sortable)');
        vm.reorder(evt.oldIndex, evt.newIndex);
    	}
    });
  },
  methods: {
    reorder(oldIndex, newIndex) {
      // move the item in the underlying array
      this.list.splice(newIndex, 0, this.list.splice(oldIndex, 1)[0]);
      // update order property based on position in array
      this.list.forEach(function(item, index){
        item.order = index + 1;
      });
    }
  }
});
ul.sort {
  list-style: none;
  padding: 0;
  margin: 30px;
}

li.sort-item {
  padding: 10px;
  width: 25%;
  float: left;
  margin: 0 10px 10px 0;
  background: #EFEFEF;
  border: solid 1px #CCC;
}

.sort-ghost {
  opacity: 0.3;
  transition: all 0.7s ease-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>

<div id="app">
  <dragdrop></dragdrop>
</div>

<template id="dragdrop">
  <ul id="sort" class="sort cf">
    <li class="sort-item" order="{{ item.order }}" v-for="item in list">
      {{ item.name }} - ({{ item.order}})
    </li>
  </ul>
</template>

Comments