vue实现列表拖拽排序的功能

　　在日常开发中，特别是管理端，经常会遇到要实现拖拽排序的效果；这里提供一种简单的实现方案。

　　此例子基于vuecli3

首先，我们先了解一下js原生拖动事件:

　　在拖动目标上触发事件 (源元素):

  • ondragstart - 用户开始拖动元素时触发
  • ondrag - 元素正在拖动时触发
  • ondragend - 用户完成元素拖动后触发　　

　　释放目标时触发的事件:

  • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
  • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
  • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
  • ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

　基于js的原生拖拽事件，本次实现的拖拽排序的原理大概是：鼠标按住列表某一项开始拖动时触发ondragstart事件，将该拖动项用变量记录下来；

接着拖拽过程中，该拖动项经过列表其他项时，触发ondragenter事件，同样记录该拖动项最后经过的列表其他项的数据，最后在ondragend 事件中

将数组列表删掉一开始ondragstart事件记录的拖动项，并将删掉的数据插入ondragenter事件最后记录的位置，完成拖动排序。

　具体代码如下：

<template>
  <div class="test_wrapper" @dragover="dragover($event)">
    <transition-group class="transition-wrapper" name="sort">
      <div v-for="(item) in dataList" :key='item.id' class="sort-item"
        :draggable="true"
        @dragstart="dragstart(item)"
        @dragenter="dragenter(item,$event)"
        @dragend="dragend(item,$event)"
        @dragover="dragover($event)"
      >
        {{ item.label }}
      </div>
    </transition-group>
  </div>
</template>

<script lang="ts">
  import {Vue, Component, Prop, Watch} from "vue-property-decorator";
  import { addWebsite } from '@/api'
  @Component({
    components: {}
  })
  export default class Test extends Vue {

    oldData: any = null; // 开始排序时按住的旧数据
    newData: any = null; // 拖拽过程的数据

    // 列表数据
    dataList:any = [
      { id:1,label:'测试一号' },
      { id:2,label:'测试二号' },
      { id:3,label:'测试三号' },
      { id:4,label:'测试四号' },
    ];

    dragstart(value: any) {
      this.oldData = value
    }

    // 记录移动过程中信息
    dragenter(value: any, e: any) {
      this.newData = value
      e.preventDefault()
    }

    // 拖拽最终操作
    dragend(value: any, e: any) {
      if (this.oldData !== this.newData) {
        let oldIndex = this.dataList.indexOf(this.oldData)
        let newIndex = this.dataList.indexOf(this.newData)
        let newItems = [...this.dataList]
        // 删除老的节点
        newItems.splice(oldIndex, 1)
        // 在列表中目标位置增加新的节点
        newItems.splice(newIndex, 0, this.oldData)
        this.dataList = [...newItems]
      }
    }

    // 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
    dragover(e: any) {
      e.preventDefault()
    }

  };
</script>

另外

　　为了实现拖动的动画效果，这里用到了transition-group组件，如上面代码显示，将transition-group组件的属性name设为‘sort'；并添加以下代码；

    .sort-move {
      transition: transform 0.3s;
    }

注意：为了让transition有效果出现，v-for渲染的数据列表必须有key属性，且该key属性不可设为index；

最终效果如下：

以上就是vue实现列表拖拽排序的功能的详细内容，更多关于vue 拖拽排序的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Vue 基于 vuedraggable 实现选中、拖拽、排序效果

    今天有个朋友说要做个效果:Vue实现拖拽排序,要有 checked,输出结果是排序后的,要全选,未选中的不能拖动. 其实我之前基于 Sortable 做过一个类似的效果.也给他看过了,没看太明白,他就自己基于 vuedraggable 实现了一下. 正好有点问题给他解决了一下.废话不多说,先上最终效果:Vue 拖拽排序效果 测试地址.下面就是最终效果图. 效果一:实现选中 和 全选效果 就下面这样,elementUI 官方 Demo.很简单毫无挑战呀. <el-checkbox :indeter

  • 基于Vue实现平滑过渡的拖拽排序功能

    最近重读Vue官方文档,在 列表的排序过渡 这一小节,文档提到,<transition-group> 组件有一个特殊的地方,不仅可以实现进入和离开动画,还可以改变定位,官网示例如下: 例子中实现的效果看起来还是非常不错的,这个效果使我想起来另外一个使用场景,之前我在实现一个列表展示需求的时候,PM想让这个列表具有拖动排序的功能,方便他操作(事实上我最后并没有给他做哈哈),拖动的动画跟这个很像,网上搜索一下,类似插件应该很多,那如果我们自己来实现一个,问题在哪里呢? 首先要拖拽元素,记录元素拖拽

  • vue.draggable实现表格拖拽排序效果

    本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码,供大家参考,具体内容如下 主要使用vuedraggable和sortablejs两个组件. 1.安装组件 npm install vuedraggable npm install sortablejs 2.引入组件 import draggable from 'vuedraggable'; import Sortable from 'sortablejs'; export default { components:

  • vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序

    vue拖拽克隆clone组件API, vue.draggable实现盒子之间相互拖拽排序克隆(网上资源整理的文档) 效果图: -------------------------------------------------------------------------------- 首先需要安装vuedraggable依赖包: npm install vuedraggable --save 因为拖拽组件依赖sortablejs ,如果项目没有安装sortablejs ,可能需要安装一下 np

  • vuedraggable+element ui实现页面控件拖拽排序效果

    项目要实现一些控件的拖拽排序.从而找到了这款vuedraggable控件,供大家参考,具体内容如下 如上图要实现这些控件的拖拽排序 这是拖拽后 由于公司网络的原因,项目没有使用npm,都是使用的引入的js <script type="text/javascript" src="lib/sortable/Sortable.min.js"></script> <script type="text/javascript"

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

    Vue-draggable 的github传送门 : https://github.com/SortableJS/Vue.Draggable 一. 下载依赖包:npm install vuedraggable -S  二. 在需要使用的当前界面引入依赖,注册组件: import draggable from "vuedraggable"; export default { components: { draggable, } 三. 在template 中建立表格,分别写出thead 部

  • vue拖拽排序插件vuedraggable使用方法详解

    vue拖拽排序插件vuedraggable使用方法详解

    大家好,最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入 首先在vue项目中,用npm包下载下来 npm install vuedraggable -S 下载下来后,引入插件,在你的vue文件的script标签里面这样引入 import draggable from 'vuedraggable' 别忘了下面要注册组件 components: { dr

  • vue实现列表拖拽排序的功能

    在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果:这里提供一种简单的实现方案. 此例子基于vuecli3 首先,我们先了解一下js原生拖动事件: 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触

  • vue实现列表拖拽排序的示例代码

    vue实现列表拖拽排序的示例代码

    本文主要介绍了vue实现列表拖拽排序的示例代码,具体如下: <template> <div class="test_wrapper" @dragover="dragover($event)"> <transition-group class="transition-wrapper" name="sort"> <div v-for="(item) in dataList&quo

  • vue中实现拖拽排序功能的详细教程

    vue中实现拖拽排序功能的详细教程

    目录 原生拖拽 API 实现拖拽 设置元素 dragable 拖放事件 拖拽排序 拖拽API + 防抖实现 vue awe-dnd 拖拽组件 安装 awe-dnd 组件库 在 main.js 中将 awe 挂载到全局 实现案例 项目中-- 拖拽的效果 不理想 vue-smooth-DnD 安装 smooth-dnd API: container smooth-dnd 生命周期 回调 事件 API: Draggable 效果实现 项目中实现 – 拖拽位置无法确定 vuedraggable 安装 引

  • Vue实用功能之实现拖拽元素、列表拖拽排序

    目录 Vue实现拖拽元素.列表拖拽排序 组件使用 补充:排序动画 总结 Vue实现拖拽元素.列表拖拽排序 需求:    1.左右两个容器,左边和右边的元素可以拖动互换    2.列表拖拽排序 组件使用 Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件支持移动设备.拖拽和选择文本.智能滚动,可以在不同列表间拖拽.不依赖jQuery为基础,vue2过渡动画兼容.支持撤销操作,总之是一款非常优秀的vue拖拽组件 npm或yarn安装方式 yarn add vuedragg

  • react 实现表格列表拖拽排序的示例

    目录 问题描述 思路 解析 1. react-sortable-hoc 2. array-move 问题描述 在项目开发中,遇到这样一个需求:需要对表格里面的数据进行拖拽排序. 效果图如下所示: 思路 安装两个插件: react-sortable-hoc (或者 react-beautiful-dnd) array-move npm install --save react-sortable-hoc npm install --save array-move 解析 1. react-sortab

  • React.js组件实现拖拽排序组件功能过程解析

    因为使用了react.js技术栈,所以封装优先考虑输入和输出.基于数据驱动去渲染页面.控制拖拽元素的顺序. 由于我不考虑兼容IE8等旧版本浏览器,拖拽的效果采用了HTML5的拖放(Drag 和 drop).当然,如果要求兼容性丰富,使用鼠标点击的相关事件也很简单. 实现的效果如下: 第一步是先了解H5拖放的相关属性,MDN上有详细的说明,链接 有一点需要注意的是,react.js会给所有的属性事件名称前加上"on",后面则为驼峰式写法.例如原生的click事件,在react.js里应使

  • vue 使用 sortable 实现 el-table 拖拽排序功能

    本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能,具体内容如下所示: npm 下载: npm install sortablejs --save 引入: import Sortable from "sortablejs"; 代码: <template> <div class="table"> <el-table ref="dragTable" :data="tableDat

  • vue实现页面div盒子拖拽排序功能

    vue实现页面div盒子拖拽排序功能

    vue 实现页面div盒子拖拽排序功能前言:目前市面上有很多实现拖拽排序功能的插件和方法,本节不过多累述,只讲一种:css3的transition-group方法 效果图: 1. DOM中使用: <transition-group class="container" name="sort"> <div class="app-item" v-for="app in customApps" :key="

  • php接口实现拖拽排序功能

    列表拖拽排序是一个很常见的功能,但是后端接口如何处理却是一个令人纠结的问题 如何实现才能达到效率最高呢? 先分析一个场景,假如有一个页面有十条数据,所谓的拖拽就是在这十条数据来来回回的拖,但是每次拖动都会影响到其他数据例如把最后一条拖到最前面,那么后面九条就自动往后移,反之也是,嗯~~~ 先想象一下,排序号是固定的,就好像有十把椅子,每个椅子都是固定在那里的,移动的是上面的人,这样就不会影响到其他页面的数据了而且每个人换的也是之前其他人的桌椅号码,这样也不用去想到底要加多少才能排在哪里. 接口设

  • Elementui表格组件+sortablejs实现行拖拽排序的示例代码

    前言 运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便 效果 实现方式 template部分 <el-table v-loading="loading" :default-sort="{prop: 'sortNum', order: 'ascending'}" :data="list" border align="left" > <el-tab

随机推荐