Drag and Drop Tree UI Components vue.js ライブラリ

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

2020年2月12日

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

 vue-tinyboxとは

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

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

 

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

 

環境

Vue 2.6.10
vue-slicksort 1.1.3

 

インストール

以下のnpmyarnCDNを使ってインストールします。

npm

npm install vue-slicksort --save

yarn

yarn add vue-slicksort

CDN

<script src="https://unpkg.com/[email protected]/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.メソッドを設定

SlickListSlickItemcomponentsに取り込みます。

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;
}

 

サンプル

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

 

さいごに

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

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Drag and Drop, Tree, UI Components, vue.js, ライブラリ
-, ,