vue 2.0中如何使用sortable

来源：互联网发布：mac os sierra 卡编辑：程序博客网时间：2024/06/07 23:01

vue 2.0中使用sortable会出现el 是标签元素，不是未定义的对象
vue 2.0开发项目中要实现拖拽排序的功能，推荐的用vue-sortable
网址：(https://github.com/RubaXa/Sortable)

安装步骤：

npm install vue-sortable

npm run dev

import Vue from 'vue'import Sortable from 'vue-sortable'Vue.use(Sortable)

在.vue文件的用法
<div id="box"> <h2>{{ title }}</h2> <div id="items"> <div class="item">11111</div> <div class="item">22222</div> <div class="item">123</div> <div class="item">123</div> </div> </div>
.vue中的js部分

import Sortable from 'vue-sortable';export default{  data: {    title: 'Sortable items',    items: [      {id: 1, title: 'Item 1'},      {id: 2, title: 'Item 2'},      {id: 3, title: 'Item 3'}    ]  },  mounted: function(){    var self = this;    self.$nextTick(function(){        console.log(Sortable);      var sortable = Sortable.create(document.getElementById('items'), {        onEnd: function(e) {          var clonedItems = self.items.filter(function(item){           return item;          });          clonedItems.splice(e.newIndex, 0, clonedItems.splice(e.oldIndex, 1)[0]);          self.items = [];          self.$nextTick(function(){            self.items = clonedItems;          });        }      });     });}

在html文件的用法

<!DOCTYPE html><html><head>  <!-- VueJS -->  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>  <!-- SortableJS -->  <script src="https://unpkg.com/sortablejs@1.4.2"></script>  <!-- VueSortable -->  <!-- <script src="https://unpkg.com/vue-sortable@0.1.3"></script> -->  <style>      * {  font-family: Arial;}.item{  padding: 10px;  background: #ccc;  margin: 10px;}  </style></head><body id="app">   <div id="box">  <h2>{{ title }}</h2>  <div id="items">      <div class="item">11111</div>      <div class="item">22222</div>      <div class="item">123</div>      <div class="item">123</div>  </div>  <!-- <div><button v-on:click.stop.prevent="addItem">Add item</button></div> --></div>    <script>window.box = new Vue({  el: '#box',  data: {    title: 'Sortable items',    items: [      {id: 1, title: 'Item 1'},      {id: 2, title: 'Item 2'},      {id: 3, title: 'Item 3'}    ]  },  mounted: function(){    var self = this;    self.$nextTick(function(){        console.log(Sortable);      var sortable = Sortable.create(document.getElementById('items'), {        onEnd: function(e) {          var clonedItems = self.items.filter(function(item){           return item;          });          clonedItems.splice(e.newIndex, 0, clonedItems.splice(e.oldIndex, 1)[0]);          self.items = [];          self.$nextTick(function(){            self.items = clonedItems;          });        }      });     });  }});    </script></body></html>

阅读全文

0 0