利用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 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
Javascript attachEvent传递参数的办法
Dec 14 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
Javascript动画效果(4)
Oct 11 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
微信小程序实现页面左右滑动
Nov 16 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中逗号与点号的区别
2013/08/05 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
PHP时间类完整代码实例
2021/02/26 PHP
JS继承--原型链继承和类式继承
2013/04/08 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
How TDD works
2012/09/30 面试题
在职研究生自我鉴定
2013/10/16 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
学校三节实施方案
2014/06/09 职场文书
婚内房产协议书范本
2014/10/02 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB