利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序


Posted in Javascript onJune 07, 2019

Vue-draggable 的github传送门 :

https://github.com/SortableJS/Vue.Draggable

一. 下载依赖包:npm install vuedraggable -S 

二. 在需要使用的当前界面引入依赖,注册组件:

import draggable from "vuedraggable";
export default {
 components: {
 draggable,
 }

三. 在template 中建立表格,分别写出thead 部分不变, 此处需要将draggable 渲染成tbody,不然draggable会被解析成div 影响样式。

(渲染方法:<draggable v-model="tablelist" element="tbody">)

<table class="dataTabble">
 <thead>
 <tr>
  <th width="110">栏目名称</th>
  <th width="200">发布时间</th>
  <th width="160">公告数量</th>
  <th width="160">操作</th>
 </tr>
 </thead>
 <draggable v-model="tablelist" element="tbody" :move="getdata" @update="datadragEnd">
 <tr v-for="(item,id) in tablelist" :key="id">
  <td>{{item.name}}</td>
  <td>{{item.time}}</td>
  <td>{{item.num}}</td>
  <td>
  <div class="tabopa">
   <a @click="dialogFormVisible = true" style="cursor:pointer">添加</a>
   <a @click="open2">删除</a>
  </div>
  </td>
 </tr>
 </draggable>
</table>
<div class="zhu mt40">提示:拖动可对栏目进行排序</div>

此处data部分,通过{ {   } } 获取data中数据,实际中通过请求获取

data() {
 return {
 tablelist: [
  { id: 1, name: "活动消息1", time: "2018-08-25 14:54", num: "1000" },
  { id: 2, name: "公司消息2", time: "2018-08-25 14:54", num: "200" },
  { id: 3, name: "个人消息3", time: "2018-08-25 14:54", num: "30000" },
  { id: 4, name: "客户消息4", time: "2018-08-25 14:54", num: "40" }
 ],
 };
},

四.相关方法

获取拖动中和拖动结束时的id

methods: {
 //拖动中与拖动结束
 getdata(evt) {
  console.log(evt.draggedContext.element.id);
 },
 datadragEnd(evt) {
  console.log("拖动前的索引 :" + evt.oldIndex);
  console.log("拖动后的索引 :" + evt.newIndex);
  console.log(this.tags);
 },

 五.贴出全部代码

<template>
 <div>
 <!--main-->
   <table class="dataTabble">
    <thead>
    <tr>
     <th width="110">栏目名称</th>
     <th width="200">发布时间</th>
     <th width="160">公告数量</th>
     <th width="160">操作</th>
    </tr>
    </thead>
    <draggable v-model="tablelist" element="tbody" :move="getdata" @update="datadragEnd">
    <tr v-for="(item,id) in tablelist" :key="id">
     <td>{{item.name}}</td>
     <td>{{item.time}}</td>
     <td>{{item.num}}</td>
     <td>
     <div class="tabopa">
      <a @click="dialogFormVisible = true" style="cursor:pointer">添加</a>
      <a @click="open2">删除</a>
     </div>
     </td>
    </tr>
    </draggable>
   </table>
   <div class="zhu mt40">提示:拖动可对栏目进行排序</div>
 <!--main end-->
 </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
 components: {
 draggable,
 },
 data() {
 return {
  tablelist: [
  { id: 1, name: "活动消息1", time: "2018-08-25 14:54", num: "1000" },
  { id: 2, name: "公司消息2", time: "2018-08-25 14:54", num: "200" },
  { id: 3, name: "个人消息3", time: "2018-08-25 14:54", num: "30000" },
  { id: 4, name: "客户消息4", time: "2018-08-25 14:54", num: "40" }
  ],
 };
 },
 methods: {
 //拖动中与拖动结束
 getdata(evt) {
  console.log(evt.draggedContext.element.id);
 },
 datadragEnd(evt) {
  console.log("拖动前的索引 :" + evt.oldIndex);
  console.log("拖动后的索引 :" + evt.newIndex);
  console.log(this.tags);
 },
 }
}
</script>
<style>
</style>

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

Javascript 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
图解javascript作用域链
May 27 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
Vue中实现权限控制的方法示例
Jun 07 #Javascript
vue 父组件中调用子组件函数的方法
Jun 06 #Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 #Javascript
小试小程序云开发(小结)
Jun 06 #Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 #Javascript
微信小程序如何使用globalData的方法
Jun 06 #Javascript
详解微信小程序开发(项目从零开始)
Jun 06 #Javascript
You might like
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
跟老齐学Python之重回函数
2014/10/10 Python
python 字典中取值的两种方法小结
2018/08/02 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
自我鉴定标准格式
2014/03/19 职场文书
奉献演讲稿范文
2014/05/21 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
2014年共青团工作总结
2014/12/10 职场文书
教师求职自荐信
2015/03/26 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
七年级语文教学反思
2016/03/03 职场文书