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 相关文章推荐
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
基于js实现数组相邻元素上移下移
May 19 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
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
JavaScript中的History历史对象
2008/01/16 Javascript
js可突破windows弹退效果代码
2008/08/09 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
JavaScript常用本地对象小结
2016/03/28 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
Python常用模块介绍
2014/11/21 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
旷工检讨书1000字
2015/01/01 职场文书
道歉信怎么写
2015/05/12 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书