vue2.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{
  width: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{
  width: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);

      }

    }
  })

})

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

可下载案例地址:Vue.Draggable-case_jb51.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 基于vue2的table分页组件实现方法

    本文实例为大家分享了vue2 table分页组件的具体代码,供大家参考,具体内容如下 pagination.js: (function(){ var template = '<div class="page-bar" > \ <div class="info">{{info}}</div>\ <div class="showpages">每页<select class="showpa

  • Vue.js组件tab实现选项卡切换

    本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:

  • vue分页组件table-pagebar使用实例解析

    之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作主要是基于java的服务端开发工作,对前端框架和组件的理解,不够深入,借此来记录在前端框架使用和构建中的点点滴滴. 此分页组件参照于bootstrap-datatable底部分页开发完成,相关参数增加自定义功能. 最终使用展现效果图如下,数据来源于cnodejs[https://cnodejs.or

  • 基于Vue.js实现tab滑块效果

    本文实例为大家分享了Vue.js实现tab滑块效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met

  • Vue.js组件tabs实现选项卡切换效果

    今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di

  • 基于Vue实现tab栏切换内容不断实时刷新数据功能

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好 也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来 先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> &l

  • vue插件tab选项卡使用小结

    本文实例为大家分享了vue插件tab选项卡的使用方法,供大家参考,具体内容如下 基本用法 <template> <tab :options="tabOpt" :state.sync="stateIndex"></tab> </template> <script type="text/babel"> import tab from 'components/tab_touch'; expor

  • bootstrap vue.js实现tab效果

    本文实例为大家分享了bootstrap vue.js实现tab效果的具体代码,供大家参考,具体内容如下 项目目录结构 Student.js代码 function Student(){ this.baseInfo = { tabStatus : true , name : '张三', sex : 'male' } , this.parentsInfo = { tabStatus : false, fatherName : '张全蛋', motherName : '李铁柱' } , this.stu

  • 使用vue.js写一个tab选项卡效果

    通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,但是在vue.js中,我们能不去操作dom我们就尽量不操作dom,那么该如何实现呢? 如果使用过vue-router,那么你会发现,vue-router在使用的时候其实就相当于一个tab选项卡,在点击之后,被点击的router-link元素会默认被添加上一个router-link-active的类,我们只需要设置这个类的样式即可.(当然,router-link-acti

  • Vue.js tab实现选项卡切换

    本文为大家分享了Vuejs 组件化开发tab组件实例,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/index.css" rel=&quo

随机推荐