vue2 拖动排序 vuedraggable组件的实现

一、安装插件

npm install -D vuedraggable

二、在需要排序的界面中引入组件

<script>
import draggable from 'vuedraggable'
export default {
 name: 'HelloWorld',
 components: {
  draggable
 },

三、在模板中使用

<draggable v-model="groups" @chang="change" @start="start" @end="end" :move="move">
  <div v-for="(item, index) in groups" :key=index>
   item {{item}}
  </div>
</draggable>

四、实现change、start、end、move方法，v-model绑定的数据就是排序后的数据，可以传递给后台修改数据库数据

methods: {
  change (event) {
   console.log('change', event)
  },
  start (event) {
   console.log('start', event)
  },
  end (event) {
   console.log('end', event, this.groups)
  },
  move (event, orgin) {
   console.log('move', event, orgin)
  }
}

五、完整代码，参考网址

<template>
 <div>
  排序
  <draggable v-model="groups" @chang="change" @start="start" @end="end" :move="move">
   <!-- <transition-group> -->
    <div v-for="(item, index) in groups" :key=index>
     item {{item}}
    </div>
   <!-- </transition-group> -->
  </draggable>
 </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
 name: 'HelloWorld',
 components: {
  draggable
 },
 data () {
  return {
   groups: [
    1, 2, 3, 4, 5
   ]
  }
 },
 methods: {
  change (event) {
   console.log('change', event)
  },
  start (event) {
   console.log('start', event)
  },
  end (event) {
   console.log('end', event, this.groups)
  },
  move (event, orgin) {
   console.log('move', event, orgin)
  }
 }
}
</script>

<style scoped>

</style>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

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

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

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

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

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

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

  • vue2 拖动排序 vuedraggable组件的实现

    一.安装插件 npm install -D vuedraggable 二.在需要排序的界面中引入组件 <script> import draggable from 'vuedraggable' export default { name: 'HelloWorld', components: { draggable }, 三.在模板中使用 <draggable v-model="groups" @chang="change" @start="

  • 基于vue-draggable 实现三级拖动排序效果

    vue-draggable 之前项目中需要用到拖动排序,就去网上找资料,本来最开始是想用jquery-ui里的拖动的,后面发现不符合我的预期也不知道能不能跟vue.js兼容,后面我试过了,单个的可以但是层级太多就不一样了. 废话少说直接上代码 先看数据结构,和页面的呈现,等会再来上代码. 这就是三层结构渲染出来的图.那个海锚一样的东西是可以点击的,点击后会出现当前类型所带的产品.等会会说的 我们现在来看下我实现后的拖动效果,如下 所有父类型里面的产品拖动如下 控制台的打印 好了,放了那么多图,数

  • 手写可拖动穿梭框组件CustormTransfer vue实现示例

    手写可拖动穿梭框组件CustormTransfer vue实现示例

    目录 本文内容 最终效果图 组件html布局 穿梭框左侧内容 穿梭框右侧内容 穿梭框中间向左.向右按钮 把排序好的穿梭数据传给父组件 整体代码 小结 本文内容 需求是实现类似 el-transfer的组件,右侧框内容可以拖动排序: 手写div样式 + vuedraggable组件实现. 最终效果图 组件html布局 新建一个组件文件 CustormTransfer.vue,穿梭框 html 分为左中右三部分,使用flex布局使其横向布局,此时代码如下 <template> <div cl

  • 基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)

    基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)

    在上篇文章:基于Bootstrap的Metronic框架实现页面链接收藏夹功能,介绍了链接收藏夹功能的实现,以及对收藏记录的排序处理.该篇随笔主要使用功能按钮的方式移动收藏记录,功能虽然实现的还算不错,不过文章出来后,有读者同行指出可以利用直接拖动的方式实现排序更方便,因此对其中列表记录的排序进行了研究,从而介绍了如何利用Sortable开源JS组件实现拖动排序的处理,本篇随笔介绍了该组件在连接收藏夹排序中的应用. 1.收藏记录的排序处理回顾 上篇随笔介绍的收藏夹处理,主要就是为了方便用户快速进

  • Vue中使用elementui与Sortable.js实现列表拖动排序

    本文实例为大家分享了使用elementui与Sortable.js实现列表拖动排序的具体代码,供大家参考,具体内容如下 一.安装使用Sortable.js 1.安装 cnpm install sortablejs --save 2.在需要的vue页面单独引入 <script>     import Sortable from 'sortablejs'     export default{         .........         data() {             retur

  • jquery实现的鼠标拖动排序Li或Table

    1.前端页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

  • jQuery仿360导航页图标拖动排序效果代码分享

    jQuery仿360导航页图标拖动排序效果代码分享

    jquery实现360浏览器导航页图标拖动从新排序特效源码是一款模仿360浏览器导航页网站图标拖动排序的代码.本段代码适应于所有网页使用,有兴趣的朋友们可以学习一下. 运行效果图:                                         ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的360导航页图标拖动排序效果代码如下 <!DOCTYPE

  • 针对后台列表table拖拽比较实用的jquery拖动排序

    现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码,很简单: 复制代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jqueryUI拖动</title>

  • 详解Vue2.0之去掉组件click事件的native修饰

    这个是在组件开发中遇到的问题,当时我在编写button的组件,模板是这样的: <template> <button class="disable-hover button ion-button" :class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]"> <span class="button-inner"

  • Vue2.0权限树组件实现代码

    Vue2.0权限树组件实现代码

    项目使用的饿了么的Element-Ui,权限树使用其树形控件: <el-tree :data="data" ></el-tree> 刚开始没有特殊需求,三级分支,效果看着还可以.但是接下来的新需求:增加页面操作按钮权限,即达到四级分支,同时要求四级权限布局方式为横向,而且操作按钮权限非固定四级树,但是样式要求一致.这样子就很难操作了,如果单单是四级树为横向,还可以调调样式完成.本来想修改element的tree控件源码来实现,网上查了一些资料,还没有很好的办法生

随机推荐