拖拽列表更新排序,接口提供给前端

这个功能主要是需要的算法逻辑很多

图解:

如在前端页面上想把id=5拖拽到id=3上

java 配合实现拖拽排序 java如何拖动列表进行排序_java

拖拽之后的效果:

java 配合实现拖拽排序 java如何拖动列表进行排序_java 配合实现拖拽排序_02

解析图例:

java 配合实现拖拽排序 java如何拖动列表进行排序_前端页面_03

代码示例:

/**
     * 拖拽数据更新排序
     * @param currentId 当前数据id
     * @param targetId 目标数据id
     * @return
     */
    @RequestMapping("/sort/{currentId}/{targetId}")
    public Result sort(@PathVariable("currentId") String currentId, @PathVariable("targetId") String targetId) {

        // 得到当前数据 获取sort
        Demo currDemo = demoService.getById(currentId);
        Integer currSort = currDemo.getSort();
        // 得到目标数据 获取目标sort
        Demo targetDemo = demoService.getById(targetId);
        Integer targetSort = targetDemo.getSort();

        // 获取当前和目标之间的数据
        QueryWrapper<Demo> queryWrapper = new QueryWrapper<>();
        if (targetSort<currSort) {
            queryWrapper.between("sort", targetSort, currSort);
        } else {
            queryWrapper.between("sort", currSort, targetSort);
        }
        List<Demo> list = demoService.list(queryWrapper);

        ArrayList<Integer> notList = new ArrayList<>();
        notList.add(currSort);
        list = list.stream().filter(model->{
            return !notList.contains(model.getSort());
        }).map(model->{
            if (targetSort<currSort) {
                model.setSort(model.getSort() + 1);
            } else {
                model.setSort(model.getSort() - 1);
            }
            return model;
        }).collect(Collectors.toList());

        // 目标位置sort 给 当前数据sort
        //5,5
        Integer temp = currDemo.getSort();
        //5,5  5,2
        currDemo.setSort(targetDemo.getSort());
        //2,2
        targetDemo.setSort(temp);
        list.add(currDemo);

        for (Demo demo : list) {
            demoService.updateById(demo);
        }

        Stream<Demo> stream = list.stream().sorted(Comparator.comparing(Demo::getSort));
        System.out.println(stream);
        return Result.ok(stream);
    }