zoukankan      html  css  js  c++  java
  • vuejs2.0使用Sortable.js实现的拖拽功能( 转)

    简介

    在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组。但是当把vue升级到2.0以上后发现拖拽功能失效了,于是使用了下面代码。

    该案例主要是在用于vuejs2.0中实现的拖拽功能,用到的的js有Sortable.js,vuedraggable.js,当然还有vue.min.js,提供的案例使用的require.js加载。

    实现效果

    实现后的效果如图所示:

    html主要代码

    复制代码
    <draggable :list="list2" :move="getdata" @update="datadragEnd" :options="{animation: 300,handle:'.dargDiv'}">
            <transition-group name="list-complete" >
                <div v-for="element in list2" :key="element.it.name"  class="list-complete-item">
                    <div class="styleclass dargDiv">{{element.id}}</div>
                    <div class="styleclass">{{element.it.name}}</div>
                </div>
            </transition-group>
        </draggable>
    复制代码

    css代码

    复制代码
     body{
        font-family:'微软雅黑'
    }
    [v-cloak]{
        display:none;
    }
    #example{
        1000px;
        margin:0 auto;
    }
    .list-complete-item {
      transition: all 1s;
        height:50px;
        line-height: 50px;
        background: #000;
        color:#fff;
        text-align: center;
        font-size:24px;
        margin-top:10px;
    }
    .styleclass{
        100px;
        float:left;
    }
    .list-complete-enter, .list-complete-leave-active {
      opacity: 0;
      height: 0px;
      margin-top: 0px;
      padding: 0px;
      border: solid 0px;
    }
    .list-complete-sortable-chosen,.list-complete-sortable-ghost{
     opacity: 0;
      height: 0px;
      margin-top: 0px;
      padding: 0px;
      border: solid 0px;
    }
    .dargDiv{
        cursor:move;
        background:red;
    }
    .wrods{
        margin-top:50px;
    }
    p{
        line-height:24px;
        text-align:center;
    }
    复制代码

    js代码

    复制代码
    require.config({
        urlArgs: "ver=1.0_0",
        
        paths:{
            "vue":'vue.min2',
            "sortablejs":'Sortable',
            "vuedraggable":'vuedraggable'    
        },
        shim:{
            'vue':{
                exports:'vue'
            } 
        }
    }),
    
    require(['vue','vuedraggable'],function(Vue,draggable){
        Vue.component('draggable', draggable);
         new Vue({
            el: '#example',
            data: {
               list2:[
               {id:"id1",it:{name:'bbbb'}},
               {id:"id2",it:{name:'2222'}},
               {id:"id3",it:{name:'3333'}},
               {id:"id4",it:{name:'4444'}}
               ]
            },
            methods:{
                getdata: function(evt){
                    console.log(evt.draggedContext.element.id);
                },
                datadragEnd:function(evt){
                    console.log('拖动前的索引:'+evt.oldIndex);
                    console.log('拖动后的索引:'+evt.newIndex);
                    
                }
                
            }
        })
        
    })
    复制代码

    里面的可配置的很多细节请参考参考地址,这里不做详细介绍。

    页面展示地址:https://hxlmqtily1314.github.io/Vue.Draggable-case/
    github地址:https://github.com/hxlmqtily1314/Vue.Draggable-case

    参考地址:https://github.com/SortableJS/Vue.Draggable

  • 相关阅读:
    令我印象最深刻的三个老师
    硬盘大于2T安装CentOS7.X时要注意分区
    Linux网卡配置
    Python13:文件操作
    Python12:集合
    Python11:字典
    Python10:String字符串
    Python09:元组
    Python08:列表
    Python07:模块初识
  • 原文地址:https://www.cnblogs.com/jiligalaer/p/11777388.html
Copyright © 2011-2022 走看看