Vue

by Md. Atiquzzaman Soikat

HTML

<script src="//cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.15.0/vuedraggable.min.js"></script>
<div id="app">
  <h2>Todos:</h2>
<div>
<draggable v-model="myArray" :options="{ filter: '.ignore'}" @start="drag=true" @end="drag=false">
        <p v-for="(item, index) in myArray" :class="[index === 0 || index === myArray.length - 1 ? 'ignore' : 'block']">
      {{item.name}}
      </p>
  </draggable>
</div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
.block{
  padding: 10px;
  border: 1px dotted green
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    myArray: [
  {
    "name": "vue.draggable",
    "order": 1,
    "fixed": false
  },
  {
    "name": "draggable",
    "order": 2,
    "fixed": false
  },
  {
    "name": "component",
    "order": 3,
    "fixed": false
  },
  {
    "name": "for",
    "order": 4,
    "fixed": false
  },
  {
    "name": "vue.js 2.0",
    "order": 5,
    "fixed": false
  },
  {
    "name": "based",
    "order": 6,
    "fixed": false
  },
  {
    "name": "on",
    "order": 7,
    "fixed": false
  },
  {
    "name": "Sortablejs",
    "order": 8,
    "fixed": false
  }
],
  },
  methods: {
		
  }
})