vue 2.0でsortableの使用方法

9363 ワード

vue ドラッグします

vue 2.0でsortableを使用するとelはラベル要素であり、未定義のオブジェクトではありませんvue 2.0開発プロジェクトでドラッグ・ソートを実現する機能です.推奨されるのはvue-sortable Webサイトです:(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ファイルの使い方

 
 {{ title }}
 
  
 11111
 
 22222
 
 123
 
 123

.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ファイルでの使い方


<html>
<head>
  
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js">script>
  
  <script src="https://unpkg.com/[email protected]">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">11111div>
      <div class="item">22222div>
      <div class="item">123div>
      <div class="item">123div>
  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>

AmazonLinuxでHAProxy1.6.6をrpmビルド