タッチフレンドリーでアニメーション化されたドラッグコンポーネント「vue-slicksort」

 vue-tinyboxとは

vue-slicksortは、タッチフレンドリーでアニメーション化されたドラッグコンポーネントライブラリです。

タッチデバイスをサポートする必要がある場合、軸へのドラッグをロックする必要があります。
さらにノードがソートされている時にアニメーションを付けるのは非常に困難になります。
vue-slicksortは、これらのギャップを埋めるためにコンポーネントミックスインのシンプルなセットを提供することを目指しています。
これらすべてを望むならvue-slicksortはベストな選択になり得ます。

環境

インストール

以下のnpm、yarn、CDNを使ってインストールします。

npm

npm install vue-slicksort --save

yarn

yarn add vue-slicksort

CDN

<script src="https://unpkg.com/vue-slicksort@latest/dist/vue-slicksort.min.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/Jexordexan/vue-slicksort

導入手順

1. ライブラリの取り込み

（1）ES6等の場合 [注意]モジュール版は未検証です。

import { ContainerMixin, ElementMixin } from 'vue-slicksort';

（2）CDNの場合

const SlickList = window.VueSlicksort.SlickList;
const SlickItem = window.VueSlicksort.SlickItem;

2.メソッドを設定

SlickList と SlickItem をcomponentsに取り込みます。

var items = [];

for(let n=0; n<10; n++)
{
  items.push({
    no:n,
    title:'title-'+n
  })
}

new Vue({
  el: '#app',
  data: {
    items: items
  },
  components: {
    'slick-list':SlickList,
    'slick-item':SlickItem
  },
});

3. テンプレートを準備

<slick-list> と <slick-item> を設置します。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <slick-list lockAxis="y" v-model="items" class="box">
    <slick-item v-for="(item, index) in items" :index="index" :key="index" class="item">
        {{item.title}}
    </slick-item>
  </slick-list>
</div>

スタイル適用

基本的なスタイルが存在しないので、サンプルとして以下を使用します。

ul, .box { 
  list-style-type: none;
} 
li, .item { 
  cursor: pointer; 
  padding: 10px;
  border: solid #ddd 1px;
  background-color: #fff;
}

サンプル

>>専用ページで確認する

さいごに

タッチフレンドリーでアニメーション化されたドラッグコンポーネントライブラリでした。

今日はこの辺でー