vue中使用muuri动态布局(一)

muuri

官方文档：https://muuri.dev/
GitHub地址：https://github.com/haltu/muuri添加链接描述

Muuri是一个JavaScript布局引擎，它允许您构建各种布局（不是开玩笑！），并使它们具有响应性、可排序、可过滤、可拖动和/或动画。

muuri的简单的使用

安装 muuri
npm i muuri

在组件中引用
import Muuri from "muuri"

<div class="muuri">
      <div
        class="item1"
        v-for="item in 5"
        :key="item"
      >
        <div class="item-content">
          <!-- Safe zone, enter your custom markup -->
          This can be anything.{{ item }}
          <!-- Safe zone ends -->
        </div>
      </div>

      <div class="item1" v-for="item in 5" :key="item" :data-sort="item">
        <div class="item-content">
          <!-- Safe zone, enter your custom markup -->
          <div class="my-custom-content">Yippee!{{ item }}</div>
          <!-- Safe zone ends -->
        </div>
      </div>
    </div>

var grid = new Muuri(".muuri", {
        items: ".item1",
        dragEnabled: true, // 是否可移动
      })

.muuri {
  position: relative;
}
.item1 {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  margin: 5px;
  z-index: 1;
  background: #000;
  color: #fff;
}
.item1.muuri-item-dragging {
  z-index: 3;
}
.item1.muuri-item-releasing {
  z-index: 2;
}
.item1.muuri-item-hidden {
  z-index: 0;
}
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}

页面展示：
可拖动元素并插入到其他元素之间