vue 拖拽功能（draggable）

不及格大学士

已于 2022-10-10 21:33:05 修改

阅读量653

点赞数 2

文章标签： vue.js javascript 前端

于 2022-10-10 21:29:20 首次发布

本文链接：https://blog.csdn.net/weixin_45005700/article/details/127252805

版权

1.引入

yarn add vuedraggable

npm i -S vuedraggable

或者

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>

<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

2.页面引入 and 注册组件

  import draggable from 'vuedraggable'

    components: {
            draggable,
    },

3.标签渲染

<!-- 绑定循环出来的数组  chosen-class是拖拽时自定义的样式  force-fallback为开启自定义样式   animation是拖拽速度  update是拖拽完成后的事件  @start是拖拽中 @end是拖拽结束-->  

<draggable v-model="Dataarrayaa" chosen-class="chosen" force-fallback="true" group="people" animation="1000">
            <transition-group style="  display: grid; grid-template-columns: 1fr 1fr 1fr;  column-gap: 10px; row-gap: 20px;">
            
              <div class="d-f Whiteplate" v-for="(item,index) in Dataarrayaa" :key="index+''">

                <div class="Picturediv" style="">


                </div>

                <div style="width:25px ;"></div>
                <div style="line-height: 30px;">
                  <div style="font-size: 18px;font-family:medium ;">名称</div>
                  <div style="font-size: 14px;"> {{item.name1}}<br>{{item.name2}}</div>
                  <div style="font-size: 18px;font-family:medium ;">日期</div>
                  <div style="font-size: 14px;">{{item.datatime}}</div>
                  <div style="font-size: 18px;font-family:medium ;">备注</div>
                  <div style="font-size: 14px;"></div>
                </div>



              </div>

          
            </transition-group>
    </draggable>


data(){
    return{

                Dataarrayaa: [
        {

          datatime: "2022-09-01"
        },
        {
     
          datatime: "2022-09-02"
        },
        {
        
          datatime: "2022-09-03"
        }, {
        
          datatime: "2022-09-04"
        }, {
       
          datatime: "2022-09-05"
        }, {
          
          datatime: "2022-09-06"
        }, {
     
          datatime: "2022-09-07"
        }, {
         
          datatime: "2022-09-08"
        }, {
       
          datatime: "2022-09-09"
        }

      ]    

        }


}