Vue.Draggableを使用したVue.jsのドラッグ可能なコンポーネント

ソート可能なリストは、Web開発のより苛立たしい部分の1つです。 Webは元々ドラッグアンドドロップを念頭に置いて作成されたものではなく、HTML5にネイティブのドラッグアンドドロップサポートが追加されたとしても、まだかなりの接続が必要です。ただし、 Vue.Draggable を使用すると、これは簡単になります。それはあなたのためにほとんどの決定を下し、あなたの利益のためにシンプルでクリーンなAPIを残します。

インストール

NPMまたはYarnからVue.Draggableをインストールします。

# Yarn
$ yarn add vuedraggable

# NPM
$ npm install vuedraggable --save

これで、どのコンポーネントでもdraggableコンポーネントをvuedraggableからインポートできます。

使用法

リストを並べ替え可能にするには、 draggable コンポーネントで任意の要素をラップするだけです（通常はv-forを使用しますが、個々の要素を実行することもできます）。

draggable は、 v-model バインディングを使用して、関連データを含むアレイを更新することもできます。

ExampleComponent.vue

<template>
  <div>
    <h2>Draggable Wrapper</h2>
    <draggable v-model="exampleList">
      <div v-for="text in exampleList" :key="text">{{text}}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable
  },

  data() {
    return {
      exampleList: [
        'Item 1',
        'Item 2',
        'Item 3',
        'Item 4',
        'Item 5'
      ]
    }
  }
}
</script>

Voilà！リストは並べ替え可能です！リストアイテムは好きなようにドラッグアンドドロップでき、変更は配列に反映されます。

小道具とイベント

小道具：

value（v-model対応）：Array-コンポーネントの入力配列。不変であるため、変更のたびに再作成されます。
list：Array- value の代替ですが、配列を再作成せずに更新します。（経由。 Array.splice（））
options：Object -Sortableの有効なオプションのいずれかを含むオブジェクト。
element：String-draggableコンポーネントによって使用されるラッパー要素。デフォルトはdivです。
clone：Function（VNode）->VNode-クローンオプションが存在する場合にVNodeをクローン化するために使用されるメソッド。かなり進んだ。主にディープクローニングに使用されます。
move：Function（evt）->Boolean-要素がドラッグされたときにCalled。 falseを返すと、操作がキャンセルされます。

イベント： 始める, 追加, 削除する, アップデート, 終わり, 選ぶ, 選別, フィルター, クローン. 参照

Vuexでの使用

VuexでVue.Draggableを使用する場合は、配列の計算プロパティを使用して、ゲッターを介してストアから配列を取得し、設定時にミューテーションをコミットします。

computed: {
  exampleList: {
    get() {
      return this.$store.state.exampleList
    },

    set(val) {
      this.$store.commit('setExampleList', val)
    }
  }
}

追加

Vue.Draggableはトランジションで正常に機能します。draggable要素がtransitionまたはtransition-group要素を直接ラップしていることを確認してください。間には他に何もあり得ません。
リストにデフォルトで0個の要素が含まれている場合は、 draggable が作成する要素が、有効なドロップターゲットになるのに十分な高さでスタイル設定されていることを確認してください。

これですべてです。

今、私はいくつかの個人的なプロジェクトに自家製のドラッグアンドドロップ機能を追加しました。これらの粗雑な実装をVue.Draggableに置き換えます。アディオス！