VUEとドラッグ組立vuedraggable VUE-ドラッグ

説明

多次元コードの行を書かVUEアドレスを生成サービスの経験の前に：https://postbird.gitee.io/vue-online-qrcode/

後で時々に見つかった2次元コードをソートしたい以上の後は、その需要のソートが出てきたドラッグ、より重要か、最初の一番上にする必要があります。

：Vueの私は2つの異なるライブラリがある見つけ、検索し、存在するコンポーネントは間違いあり知っているので、直接検索

これは二つの異なるライブラリが、直接コンポーネントのパッケージで、パッケージは命令です。

二、vuedraggable

vuedraggable 標準コンポーネントのパッケージ、およびへのドラッグ可能で transition-group 、より良い以上、トランジション。

使用します。

yarn add vuedraggable

import vuedraggable from 'vuedraggable';

使用に際して、次のことができ v-model ますが、更新または親コンポーネントのモニター・イベントをトリガする必要がある場合は、ローカル・データ・バインディング双方向可能 updated() で行きます emit。

アセンブリの導入は、サンプルコードを使用することができた後、直接宣言：

<template>
  <vuedraggable class="wrapper" v-model="list"> <transition-group> <div v-for="item in list" :key="item" class="item"> <p>{{item}}</p> </div> </transition-group> </vuedraggable> </template> <script> import vuedraggable from 'vuedraggable'; export default { name: 'HelloWorld', components: {vuedraggable}, props: { }, data() { return { list: [1,2,34,4,54,5] } }, updated() { console.log(this.list) }, methods: { } } </script> <style scoped> .wrapper { display: flex; justify-content: center; width: 100%; } .item{ width: 300px; height: 50px; background-color: #42b983; color: #ffffff; } </style>

実装の影響：

公式の例：

https://david-desmaisons.github.io/draggable-example/

公式の例のGIF：

より多くのイベントや方法を確認使用するには：

https://github.com/SortableJS/Vue.Draggable

三、素晴らしい-DND

VUE-ドラッグ名NPMパッケージがある awe-dndVUE-ドラッグではない、このライブラリの特徴は、カプセル化することで v-dragging 、その後、世界的な命令を次のようなコマンドまたは結合グローバルデータを通過します。

Vuedraggableとそれを比較し、AWE-DND結合方法はありませんこのようドラッグの終了時にイベントを提供すること、（結合方法はない非常に精密かつ正確な結合双方向がそれにさらされていないがされていません）親コンポーネントが待機してトリガするリスト（手動でリストを更新する必要が、実際には、内部が結合双方向を実現することはありません）、またはイベントを更新するために使用されます。

インストールが異なります。

npm install awe-dnd --save
yarn add awe-and

使用します。

import VueDND from 'awe-dnd'

Vue.use(VueDND) <!--your.vue--> <script> export default { data () { return { colors: [{ text: "Aquamarine" }, { text: "Hotpink" }, { text: "Gold" }, { text: "Crimson" }, { text: "Blueviolet" }, { text: "Lightblue" }, { text: "Cornflowerblue" }, { text: "Skyblue" }, { text: "Burlywood" }] } }, /* if your need multi drag mounted: function() { this.colors.forEach((item) => { Vue.set(item, 'isComb', false) }) } */ } </script> <template> <div class="color-list"> <div class="color-item" v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }" :key="color.text" >{{color.text}}</div> </div> </template>

結合するときに見つけることができる v-dragging="{ item: color, list: colors, group: 'color' }" 項目は、単一のオブジェクトであり、リストはデータのリストであり、グループは複数のデータソースが動作中のページとすることができることを確実にするために、セットを宣言するために使用される、命令のような結合形態。

この方法は、次の2つのイベントが用意されています。

export default {
  mounted () { this.$dragging.$on('dragged', ({ value }) => { console.log(value.item) console.log(value.list) console.log(value.otherData) }) this.$dragging.$on('dragend', (res) => { console.error(res); }) } }

一般的に使用される方法は次のとおりです。

this.$dragging.$on('dragend', (res) => { console.error(res); })

効果：