美文网首页
Vue 实现拖拽效果

Vue 实现拖拽效果

作者: 阿畅_ | 来源:发表于2018-12-02 20:17 被阅读31次
    • Vue 怎么实现拖拽,本来想用 Vue + 原生的 JS + HTML5 自己造一个轮子,这段时间公司要推全栈化,工作比较忙。就在网上找了一个别人造的轮子,推荐一下使用方式。

    • vuedraggable

      1. 安装
        npm i vuedraggable -S / yarn add vuedraggable
    1. 使用方式
     <template>
     <div >
       <draggable v-model="itemList" >
         <transition-group tag="div" class="drop-wrapper">
           <div class="items" v-for="(ele, index) in itemList" :key="index">
             {{ ele }}
           </div>
         </transition-group>
       </draggable>
     </div>
    </template>
    <script>
    import draggable from 'vuedraggable'
    
    export default {
     data() {
       return {
         itemList: ['item 1', 'item 2', 'item 3', 'item 4', 'item 5'],
       }
     },
     components: {
       draggable,
     }
    }
    

    相关文章

      网友评论

          本文标题:Vue 实现拖拽效果

          本文链接:https://www.haomeiwen.com/subject/erdscqtx.html