Vue-draggable-resizable示例

以下是一个简单的 Vue-draggable-resizable 示例：

<template>
  <div>
    <draggable
      v-model="list"
      :options="{group:'widgets'}"
      :element="'div'"
      :move="onMove"
      :end="onEnd"
    >
      <div
        v-for="(item, index) in list"
        :key="index"
        :style="{width: item.width + 'px', height: item.height + 'px', backgroundColor: item.color}"
        class="widget"
      >
        <vue-draggable-resizable
          :w="item.width"
          :h="item.height"
          :x="item.x"
          :y="item.y"
          :min-width="100"
          :min-height="100"
          :active="item.active"
          :parent="true"
          :snap-to-grid="true"
          :grid-size="[20, 20]"
          @resizing="onResizing"
          @dragging="onDragging"
          @dragstop="onDragStop"
          @resizingstop="onResizeStop"
        >
          <div class="content">
            <p>{{ item.text }}</p>
          </div>
        </vue-draggable-resizable>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  components: {
    draggable,
    VueDraggableResizable
  },
  data() {
    return {
      list: [
        { x: 0, y: 0, width: 200, height: 200, color: '#f5f5f5', text: 'Widget 1', active: false },
        { x: 220, y: 0, width: 300, height: 200, color: '#f5f5f5', text: 'Widget 2', active: false },
        { x: 0, y: 220, width: 250, height: 300, color: '#f5f5f5', text: 'Widget 3', active: false }
      ]
    }
  },
  methods: {
    onMove(event) {
      return event.related.className === 'content'
    },
    onEnd(event) {
      this.list[event.newIndex].active = false
    },
    onResizing(event) {
      const item = this.list[event.index]
      item.width = event.width
      item.height = event.height
    },
    onDragging(event) {
      const item = this.list[event.index]
      item.x = event.x
      item.y = event.y
    },
    onDragStop(event) {
      const item = this.list[event.index]
      item.active = true
    },
    onResizeStop(event) {
      const item = this.list[event.index]
      item.active = true
    }
  }
}
</script>

<style scoped>
.widget {
  position: absolute;
  border: 1px solid #ccc;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: move;
}
</style>

在这个示例中，我们使用了 Vue-draggable-resizable 组件来创建可拖拽和可调整大小的小部件。我们使用了 `draggable` 组件来使小部件能够被拖动并与其他小部件交换位置。

我们还使用了一些事件来处理小部件的拖动和调整大小。当小部件被拖动或调整大小时，我们更新其位置和大小，并将其标记为活动状态，以便在其他事件处理程序中使用。

最后，我们使用一些 CSS 样式来设置小部件的外观和位置。