Vue.Draggableによるドラッグ効果(クイック使用)
2824 ワード
1.ダウンロードパッケージ:npm install vuedraggable
構成:package.json
import draggable from 'vuedraggable'
3.登録:draggableというコンポーネント
components: {
draggable
},
4.htmlテンプレートでこのコンポーネントを使用する
一つはドラッグ中
一つはドラッグ終了
転載先:https://www.cnblogs.com/songdongdong/p/6928945.html
構成:package.json
"dependencies": {
"element-ui": "^1.3.4",
"less": "^2.7.2",
"less-loader": "^4.0.4",
"vue": "^2.3.3",
"vue-router": "^2.3.1",
"vuedraggable": "^2.11.0"
},
2.あなたのコンポーネントに依存を導入する:import draggable from 'vuedraggable'
3.登録:draggableというコンポーネント
components: {
draggable
},
4.htmlテンプレートでこのコンポーネントを使用する
<draggable v-model="tags" :move="getdata" @update="datadragEnd">
<transition-group>
<div v-for="element in tags" :key="element.id">
{
{element.name}}
div>
transition-group>
draggable>
5.一般的な方法は2つあります一つはドラッグ中
一つはドラッグ終了
methods: {
getdata (evt) {
console.log(evt.draggedContext.element.id)
},
datadragEnd (evt) {
console.log(' :' + evt.oldIndex)
console.log(' :' + evt.newIndex)
console.log(this.tags)
}
}
今は自分で使ってみることができます~転載先:https://www.cnblogs.com/songdongdong/p/6928945.html