vue中Vue.Draggable实现拖拽效果


快速实现Vue.Draggable的拖拽效果,具体内容如下:

第一种方式:vuedraggable组件安装

安装:

npm install vuedraggable --save

配置:package.json

"dependencies": {
    "axios": "^0.16.2",
    "babel-polyfill": "^6.23.0",
    "element-ui": "^1.3.7",
    "vue": "^2.3.3",
    "vue-router": "^2.3.1",
    "vue-schart": "^1.0.0",
    "vuedraggable": "^2.16.0"
  },

在你的组件中引进依赖:

import draggable from 'vuedraggable'

注册:draggable这个组件

components: {
draggable
},

使用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>

Vue.Draggable实现拖拽效果   https://www.jb51.net/article/115146.htm

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM