vue2.0使用Sortable.js实现的拖拽功能示例


Posted in Javascript onFebruary 21, 2017

简介

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

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

实现效果

实现后的效果如图所示:

vue2.0使用Sortable.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_3water.rar

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

Javascript 相关文章推荐
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 #Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 #Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 #Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 #Javascript
从零学习node.js之文件操作(三)
Feb 21 #Javascript
JavaScript实现按键精灵的原理分析
Feb 21 #Javascript
javascript 组合按键事件监听实现代码
Feb 21 #Javascript
You might like
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
详解如何运行vue项目
2019/04/15 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
Python XML RPC服务器端和客户端实例
2014/11/22 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Python中函数的返回值示例浅析
2019/08/28 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
python安装及变量名介绍详解
2020/12/12 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
道德模范先进事迹
2014/02/14 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
小学生期末评语
2014/04/21 职场文书
车辆工程专业求职信
2014/06/14 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
群众路线剖析材料
2014/09/30 职场文书
西安大雁塔导游词
2015/02/10 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL