拖拽格子排序后台用Java怎么写

拖拽格子排序可以通过前端JavaScript来实现，而后台Java主要负责接收前端传来的数据并处理。具体实现步骤如下：

1. 前端页面上实现拖拽功能，并将拖拽后的数据通过AJAX或者WebSocket传递给后台。

2. 后台Java接收到前端传来的数据，可以采用Spring MVC框架等技术，将数据绑定到Java对象中，方便后续处理。

3. 在Java对象中对数据进行排序，可以使用Java自带的Collections.sort()方法，或者自定义排序算法。

4. 处理完数据后，将排序结果返回给前端，可以采用JSON格式进行传递。

需要注意的是，拖拽格子排序涉及到前后端的交互，因此需要对数据进行校验和安全性处理，避免出现安全漏洞。

相关问题

树层结构表如何用java实现拖动排序

可以使用Java中的树形结构类(TreeModel)来实现树层结构表的拖动排序。具体实现方法是，通过实现TreeModel中的方法，包括getChild、getChildCount、getParent、isLeaf、getIndexOfChild、valueForPathChanged、addTreeModelListener等方法，来构建树形结构，并在其中实现拖动排序的功能。同时，可以使用Java Swing中的JTree组件来展示树形结构表，并通过设置JTree的拖动监听器(DragSourceListener)和放置监听器(DropTargetListener)来实现拖动排序的功能。

用elementui写一个拖动排序

抱歉，我是一名语言模型，无法执行代码。以下是用Element UI实现一个简单的拖动排序的代码示例，供您参考：

<template>
  <div>
    <el-card>
      <h3>拖动排序</h3>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">
          <el-card class="sortable-list">
            <h4>未排序列表</h4>
            <el-divider></el-divider>
            <draggable v-model="items" :options="{animation: 150, handle: '.handle'}" class="sortable">
              <div v-for="(item, index) in items" :key="item.id" class="sortable-item">
                <div class="handle">☰</div>
                <div>{{ item.name }}</div>
              </div>
            </draggable>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="sortable-list">
            <h4>已排序列表</h4>
            <el-divider></el-divider>
            <draggable v-model="sortedItems" :options="{animation: 150, handle: '.handle'}" class="sortable">
              <div v-for="(item, index) in sortedItems" :key="item.id" class="sortable-item">
                <div class="handle">☰</div>
                <div>{{ item.name }}</div>
              </div>
            </draggable>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' },
      ],
      sortedItems: []
    }
  },
  methods: {
    onSort() {
      this.sortedItems = this.items.slice().sort((a, b) => a.id - b.id)
    }
  },
  watch: {
    items: {
      deep: true,
      handler() {
        this.onSort()
      }
    }
  }
}
</script>

<style scoped>
.sortable-list {
  margin-bottom: 20px;
  min-height: 150px;
  padding: 10px;
}
.sortable-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  padding: 10px;
}
.handle {
  cursor: move;
  margin-right: 10px;
}
</style>

上述代码使用了Vue.js和vuedraggable库实现了拖动排序的功能。其中，`items`是未排序的列表，`sortedItems`是已排序的列表。通过使用`draggable`组件来实现拖动排序的功能，设置`animation`、`handle`等参数来控制拖动的动画效果和拖动句柄的样式。在`onSort`方法中，通过对`items`数组进行排序，将排序后的结果赋值给`sortedItems`数组。同时，通过`watch`监听`items`数组的变化，每次变化都会重新排序并更新`sortedItems`数组。最终，通过在模板中引用`draggable`组件和两个列表来实现了拖动排序的交互效果。