专栏首页前端开发随笔vuedraggable实现列表拖动排序

vuedraggable实现列表拖动排序

文档地址

安装

npm i -S vuedraggable

页面进行导入

import draggable from "vuedraggable";

完整代码效果

<template>
  <div class="box">
    <draggable v-model="list" chosenClass="active" animation="500" @end="dragEnd">
      <div class="row" v-for="(item,index) in list" :key="index">{{item}}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7]
    };
  },
  methods: {
    dragEnd() {
      console.log(this.list);
    }
  }
};
</script>

<style scoped>
.row {
  background: cadetblue;
  width: 100%;
  height: 150px;
  line-height: 150px;
  text-align: center;
  margin: 15px 0;
}
.active {
  background: chocolate !important;
}
</style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Css实现瀑布流布局

    我们只需要设置最外层的父级(waterfall)和子级的父元素(poster)的css就可以

    wePanda
  • jQuery限制复选框checkbox的选中次数

    wePanda
  • jQuery实现点击添加样式同胞移除样式

    wePanda
  • 详解:tab 3

    核心:因为li浮动了,所以达到普通流了,如果父级不设置高度就会塌陷,为什么会塌陷,因为 1.什么是浮动元素的脱标? 脱标: 脱离标准流 当某一个元素浮动之...

    用户7873631
  • Android6.0源码分析之menu键弹出popupwindow菜单流程分析

    例如上图,在按下菜单键后会弹出对应的菜单选项,准确来说,是在菜单键弹起后出现的一个popupwindow,那么从菜单键弹起到popupwindow创建所涉及到的...

    fanfan
  • 3月8日数据动态早报| 打造健康大数据 建个人医疗信息

    数据动态早报,让您了解数据新变化,新创造和新价值。 ? ---- 一、通信 行业数据动态 1 诺基亚软件组合助力运营商网络在智能化及自动化实现大幅提升。【慧聪通...

    陆勤_数据人网
  • Python数据类型详解-列表#学习猿地

    + 在定义列表中的元素时,需要在每个元素之间使用逗号,进行分隔。[1,2,3,4]

    学习猿地
  • Python数据类型详解-列表#学习猿地

    + 在定义列表中的元素时,需要在每个元素之间使用逗号,进行分隔。[1,2,3,4]

    学习猿地
  • 图片大小可控可导致CUP爆满造成网站瘫痪

    注意这个参数:size=200,可以看到下面服务器访问速度是76ms,图片是948B说明很快,那么我们把200改成10000

    渗透攻击红队
  • vue+element踩坑记-动态设置表头(以时间作为表头)

    我们都知道element提供了table的组件,非常的好用,前面我也写过一些,但是这次的需求是这样的,就是用户可以自己选择时间,自己选择天数,选择以后呢就可以直...

    何处锦绣不灰堆

扫码关注云+社区

领取腾讯云代金券