Element+draggable实现拖拽排序

最新推荐文章于 2024-09-11 10:09:58 发布

前端小li

最新推荐文章于 2024-09-11 10:09:58 发布

阅读量1.1k

点赞数 2

分类专栏：前端文章标签： vue.js html

本文链接：https://blog.csdn.net/HTML5_student/article/details/120860177

版权

前端专栏收录该内容

32 篇文章 2 订阅

订阅专栏

vue.draggable一款基于vue的拖拽插件

更多的vue.draggable知识 vue.draggable中文文档

安装方式

yarn add vuedraggable
npm i -S vuedraggable

<template>
  <div id="app">
      <div>{{drag?'拖拽中':'拖拽停止'}}</div>
      <draggable v-model="myArray" chosen-class="chosen" force-fallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">
          <transition-group>
              <div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div>
          </transition-group>
      </draggable>
  </div>
</template>
<script>
 import draggable from "vuedraggable"
export default {
  components:{
    draggable
  },
  data() {
    return {
      drag: false,
      myArray: [
          { people: 'cn', id: 1, name: 'www.itxst.com' },
          { people: 'cn', id: 2, name: 'www.baidu.com' },
          { people: 'cn', id: 3, name: 'www.taobao.com' },
          { people: 'us', id: 4, name: 'www.google.com' }
      ],
    }
  },
  mounted() {
 
 
  },
  methods: {
      onStart() {
          this.drag = true;
      },
      onEnd() {
          this.drag = false;
      }
  }
}
</script>
<style scoped>
.item {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
} 
.item:hover {
  background-color: #f1f1f1;
  cursor: move;
} 
.chosen {
  border: solid 2px #3089dc !important;
}
</style>