vue 2.0中如何使用sortable

vue 2.0 中使用sortable

笨钟

3573人浏览 · 2017-11-01 19:18:53

笨钟 · 2017-11-01 19:18:53 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^