JS拖拽排序实现

时间：2025-01-22 08:11:14

JS拖拽排序实现

  • 一、实现功能
  • 二、结果展示
  • 三、实现逻辑
  • 四、开始制作
    • 1、全局变量
    • 2、监听排序对象鼠标点击事件
    • 3、监听页面鼠标移动事件
    • 4、监听页面鼠标释放页面
  • 四、完整源码
  • 四、结语

一、实现功能

监听鼠标点击要排序的对象，跟随鼠标移动进行上下排序，鼠标释放后排序结束。

二、结果展示

JS拖拽排序结果展示

三、实现逻辑

监听需要排序对象的鼠标点击事件，同时监听页面鼠标移动事件，点击后复制点击对象跟随鼠标移动，并且用（鼠标距顶部位置）与（各个排序对象距顶部位置）进行对比，根据对比结果移动位置，进而获得排序结果。

四、开始制作

1、全局变量

 	//flag用于判断鼠标状态点击后是否松开
    let flag = false;
    //移动的对象代码
    let str = ''
    //移动对象本身宽度
    let obj_width = 0;
    //移动对象本身高度
    let obj_height = 0;
    //移动对象
    let obj_target = ''
    //移动对象同等级下标  判断比较对象是在当前移动对象上面还是下面
    let obj_index = 0;

2、监听排序对象鼠标点击事件

监听排序对象鼠标点击事件，复制对象并添加透明度后并移动到鼠标当前位置。

//监听拖拽对象鼠标点击事件
    $(".one").mousedown(function (event) {
        console.log('鼠标点击事件！')
        //存值
        obj_target = event.target;
        str = obj_target.outerHTML
        obj_width = $(obj_target).width()
        obj_height = $(obj_target).height()
        obj_index = $(obj_target).index()
        //复制拖拽对象进入隐藏的box2并设置透明度（视觉效果好一些），移动到当前位置
        $('#box2').html(str)
        $('#box2').fadeTo(1, 0.5);
        //obj_height除以二和obj_width除以二是为了让鼠标在复制对象的中间，视觉效果好一些
        $('#box2').offset({top: event.pageY - (obj_height / 2), left: event.pageX - (obj_width / 2)});

        setTimeout(function () {
            $('#box2').show();
        }, 100)
        //点击标识修改为true
        flag = true;
    })

3、监听页面鼠标移动事件

监听页面鼠标移动事件，如鼠标还未释放，则复制对象跟随鼠标位置移动，并且循环要排序的对象，使用点击对象的下标与各个排序对象下标进行以及距离顶部位置进行对比，根据对比结果实现排序，排序后并刷新点击对象的下标。

   //监听页面鼠标移动事件
    $(document).mousemove(function (event) {
        console.log('鼠标移动！')
        if (flag) {
            //复制对象跟随鼠标移动
            $("#box2").offset({top: event.pageY - (obj_height / 2), left: event.pageX - (obj_width / 2)});
            //循环要排序的对象
            $("#box .one").each(function (k, v) {
                //判断在移动对象上面的数据，判断鼠标所在距离顶部位置小于上面对象距顶部位置的位置+上面对象的高度时则移动
                if (k < obj_index && event.pageY <= $(this).offset().top + $(this).height()) {
                    $(this).before(obj_target)
                    obj_index = $(obj_target).index()
                    return false;
                }
                //判断在移动对象下面的数据，判断鼠标所在距离顶部位置大于下面对象的距顶部位置则移动
                if (k > obj_index && event.pageY >= $(this).offset().top) {
                    $(this).after(obj_target)
                    obj_index = $(obj_target).index()
                    return false;
                }
            })
        }
    });

4、监听页面鼠标释放页面

鼠标释放后清空复制对象，并且点击标识为false

  //监听页面鼠标释放事件
    $(document).mouseup(function (event) {
        console.log('释放鼠标！')
        //清空box2
        $("#box2").html('');
        //点击标识修改为false
        flag = false;
    });

四、完整源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS实现拖拽排序--超级小胖子的博客</title>
    <style>
        .box {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 100px
        }

        .list {
            width: 60%;
            height: 50px;
            margin: 10px;
            text-align: center;
            line-height: 50px;
            user-select: none
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <div class="one list" style="background-color: #19ff26">
        1
    </div>
    <div class="one list" style="background-color: #1806ff">
        2
    </div>
    <div class="one list" style="background-color: #ff4100">
        3
    </div>
    <div class="one list" style="background-color: #5f5f5f">
        4
    </div>
    <div class="one list" style="background-color: #00ac78">
        5
    </div>
</div>
<div style="display: none" id="box2"></div>

</body>
<script src="/jquery/3.4.1/"></script>
<script>
    //flag用于判断鼠标状态点击后是否松开
    let flag = false;
    //移动的对象代码
    let str = ''
    //移动对象本身宽度
    let obj_width = 0;
    //移动对象本身高度
    let obj_height = 0;
    //移动对象
    let obj_target = ''
    //移动对象同等级下标  判断比较对象是在当前移动对象上面还是下面
    let obj_index = 0;
    //监听拖拽对象鼠标点击事件
    $(".one").mousedown(function (event) {
        console.log('鼠标点击事件！')
        //存值
        obj_target = event.target;
        str = obj_target.outerHTML
        obj_width = $(obj_target).width()
        obj_height = $(obj_target).height()
        obj_index = $(obj_target).index()
        //复制拖拽对象进入隐藏的box2并设置透明度（视觉效果好一些），移动到当前位置
        $('#box2').html(str)
        $('#box2').fadeTo(1, 0.5);
        //obj_height除以二和obj_width除以二是为了让鼠标在复制对象的中间，视觉效果好一些
        $('#box2').offset({top: event.pageY - (obj_height / 2), left: event.pageX - (obj_width / 2)});

        setTimeout(function () {
            $('#box2').show();
        }, 100)
        //点击标识修改为true
        flag = true;
    })
    //监听页面鼠标释放事件
    $(document).mouseup(function (event) {
        console.log('释放鼠标！')
        //清空box2
        $("#box2").html('');
        //点击标识修改为false
        flag = false;
    });
    //监听页面鼠标移动事件
    $(document).mousemove(function (event) {
        console.log('鼠标移动！')
        if (flag) {
            //复制对象跟随鼠标移动
            $("#box2").offset({top: event.pageY - (obj_height / 2), left: event.pageX - (obj_width / 2)});
            //循环要排序的对象
            $("#box .one").each(function (k, v) {
                //判断在移动对象上面的数据，判断鼠标所在距离顶部位置小于上面对象距顶部位置的位置+上面对象的高度时则移动
                if (k < obj_index && event.pageY <= $(this).offset().top + $(this).height()) {
                    $(this).before(obj_target)
                    obj_index = $(obj_target).index()
                    return false;
                }
                //判断在移动对象下面的数据，判断鼠标所在距离顶部位置大于下面对象的距顶部位置则移动
                if (k > obj_index && event.pageY >= $(this).offset().top) {
                    $(this).after(obj_target)
                    obj_index = $(obj_target).index()
                    return false;
                }
            })
        }
    });

</script>
</html>

四、结语

一个简单使用JS实现拖拽排序的DEMO，拖拽排序在日常工作中使用场景还是比较多的，比如说商品分类这些需要排序的，以及自定义表单排序等等，希望以上思路能对各位有帮助，有什么问题欢迎大家讨论和留言，喜欢的同学们点赞关注收藏哦！

相关文章