springboot+elementui组件动态布局可拖拽移动保存代码

你可以使用Element UI的拖拽组件结合Spring Boot来实现动态布局的可拖拽移动和保存功能。下面是一个示例代码：

1. 在前端部分（使用Vue.js和Element UI）：

<template>
  <el-container>
    <el-aside>
      <el-draggable v-for="component in components" :key="component.id" :element="component">
        <component :is="component.name"></component>
      </el-draggable>
    </el-aside>
    <el-main>
      <!-- 主要内容区域 -->
    </el-main>
  </el-container>
</template>

<script>
import { Draggable } from 'vue-draggable'
import Component1 from './components/Component1.vue'
import Component2 from './components/Component2.vue'

export default {
  components: {
    'el-draggable': Draggable,
    'component1': Component1,
    'component2': Component2
  },
  data() {
    return {
      components: [
        { id: 1, name: 'component1' },
        { id: 2, name: 'component2' }
      ]
    }
  }
}
</script>

2. 在后端部分（使用Spring Boot）：

@RestController
@RequestMapping("/api/components")
public class ComponentController {
  private List<Component> components;

  public ComponentController() {
    components = new ArrayList<>();
    components.add(new Component(1, "component1"));
    components.add(new Component(2, "component2"));
  }

  @GetMapping
  public List<Component> getAllComponents() {
    return components;
  }

  @PutMapping("/{id}")
  public void saveComponentPosition(@PathVariable int id, @RequestBody Component component) {
    // 根据id保存组件的位置信息
    // component 包含了拖拽后的位置信息，例如：x、y坐标等
  }
}

public class Component {
  private int id;
  private String name;
  private int x;
  private int y;

  // 省略构造函数和getter/setter方法
}

上述代码中，前端部分使用了Element UI的拖拽组件（el-draggable）来包裹需要拖拽的组件，通过v-for指令动态渲染组件列表。后端部分使用Spring Boot提供的RestController来处理前端的请求，包括获取组件列表和保存组件位置信息。

注意：上述代码只是一个示例，实际应用中可能需要根据具体需求进行适当的修改和完善。