SortableJS/Sortable拖拽组件

vue页面使用；

<template>
  <div class="sortable">
    <div id="container" ref="sortableBox">
      <div v-for="(item, index) in arr" :key="item">
        <span>{{ item }}</span>
      </div>
    </div>
  </div>
</template>
 
<script>
import Sortable from "sortablejs";
export default {
  name: "CodeDemoSortable",
 
  data() {
    return {
      arr: ["one", "two", "three", "four"],
    };
  },
 
  mounted() {
    this.defineSortable();
  },
 
  methods: {
    defineSortable() {
      this.$nextTick(() => {
        const el = this.$refs.sortableBox;
        // 或则使用
        // const el = document.getElementById("container");
        Sortable.create(el, {
          animation: 200,//拖拽动画过渡时间
          group: "name",
          sort: true,
        });
      });
    },
  },
};
</script>
 
<style lang="scss" scoped>
.sortable {
  #container {
    width: 600px;
    height: 300px;
    margin: 50px auto;
    background-color: skyblue;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    div {
      height: 20%;
      text-align: center;
      line-height: 50px;
      width: 100%;
      background-color: plum;
    }
  }
}
</style>