jQuery div拖拽排序

最新推荐文章于 2024-04-08 09:57:15 发布

橙子爱打卡

最新推荐文章于 2024-04-08 09:57:15 发布

阅读量949

点赞数 3

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/lchzh1225019998/article/details/127429153

版权

一、创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现div拖拽排序</title>
    <link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="box">
    <div class="div">
        <div class="shuzi shu1">1</div>
    </div>
    <div class="div">
        <div class="shuzi shu2">2</div>
    </div>
    <div class="div">
        <div class="shuzi shu3">3</div>
    </div>
    <div class="div">
        <div class="shuzi shu4">4</div>
    </div>
    <div class="div">
        <div class="shuzi shu5">5</div>
    </div>
    <div class="div">
        <div class="shuzi shu6">6</div>
    </div>
    <div class="div">
        <div class="shuzi shu7">7</div>
    </div>
    <div class="div">
        <div class="shuzi shu8">8</div>
    </div>
    <div class="div">
        <div class="shuzi shu9">9</div>
    </div>
</div>
</body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="index.js" type="text/javascript"></script>
</html>

二、创建index.css

*{
    margin: 0;
    padding: 0;
}
#box{
    width: 606px;
    height: 606px;
    margin: 60px auto;
}
.div{
    float : left;
    border: 1px solid #ccc;
}

.div-dash {
    position: absolute;
    border: 1px solid #ddd;
    opacity: 0.7;
}

.dash {
    float : left;
    width: 200px;
    height: 200px;
    border: 1px dashed #f00;
}
.shuzi{
    width: 200px;
    height: 200px;
    display: inline-block;
    text-align: center;
    line-height: 200px;
    font-size: 30px;
    font-weight: bold;
}
.shu1{
    background: #598bff;
}
.shu2{
    background: #ff708d;
}
.shu3{
    background: #ffc94d;
}
.shu4{
    background: #2ce69b;
}
.shu5{
    background: bisque;
}
.shu6{
    background: thistle;
}
.shu7{
    background: khaki;
}
.shu8{
    background: orangered;
}
.shu9{
    background: cadetblue;
}

三、创建index.js

$(document).ready( function () {
    drags('div', 'div-dash', 'dash');
});

function drags(name, name2, name3) {
    var range = {x: 0, y: 0}; // 鼠标元素偏移量
    var lastPos = {x: 0, y: 0, x1: 0, y1: 0}; // 拖拽对象的四个坐标
    var tarPos = {x: 0, y: 0, x1: 0, y1: 0}; // 目标元素对象的坐标初始化
    var thidDiv = null, move = false, choose = false; // 拖拽对象 拖拽状态 选中状态
    //拖拽对象的索引、高度、的初始化。
    var thidDivWidth = 0, thidDivHeight = 0, thidDivHalfW = 0, thidDivHalfH = 0, tarFirstX = 0, tarFirstY = 0;
    var tarDiv = null, tarFirst, tempDiv; // 要插入的目标元素的对象, 临时的虚线对象
    var initPos = {x: 0, y: 0};  // 记录拖拽元素初始鼠标元素偏移量

    $('.' + name).on('mousedown', function (event) {

        choose = true;
        // 拖拽对象
        thidDiv = $(this);
        // 记录拖拽元素初始位置
        initPos.x = thidDiv.offset().left;
        initPos.y = thidDiv.offset().top;
        // 鼠标元素相对偏移量
        range.x = event.pageX - thidDiv.offset().left;
        range.y = event.pageY - thidDiv.offset().top;

        thidDivWidth = thidDiv.width();
        thidDivHeight = thidDiv.height();
        thidDivHalfW = thidDivWidth / 2;
        thidDivHalfH = thidDivHeight / 2;
        thidDiv.attr("class", name2);
        thidDiv.css({left: initPos.x + 'px', top: initPos.y + 'px'});

        // 创建新元素 插入拖拽元素之前的位置(虚线框)
        $("<div class='" + name3 + "'></div>").insertBefore(thidDiv);
        tempDiv = $("." + name3);

    });

    $(document).on('mouseup', function (event) {

        if (!choose) {
            return false;
        }

        if (!move) {
            thidDiv.attr("class", name);
            tempDiv.remove(); // 删除新建的虚线div
            choose = false;
            return false;
        }

        thidDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上
        thidDiv.attr("class", name); //恢复对象的初始样式
        tempDiv.remove(); // 删除新建的虚线div
        move = false;
        choose = false;

    }).on('mousemove', function (event) {

        if (!choose) return false;

        move = true;
        lastPos.x = event.pageX - range.x;
        lastPos.y = event.pageY - range.y;
        lastPos.x1 = lastPos.x + thidDivWidth;
        lastPos.y1 = lastPos.y + thidDivHeight;
        // 拖拽元素随鼠标移动
        thidDiv.css({left: lastPos.x + 'px', top: lastPos.y + 'px'});
        // 拖拽元素随鼠标移动 查找插入目标元素
        var $main = $('.' + name); // 局部变量：按照重新排列过的顺序 再次获取 各个元素的坐标，

        $main.each(function () {

            tarDiv = $(this);
            tarPos.x = tarDiv.offset().left;
            tarPos.y = tarDiv.offset().top;
            tarPos.x1 = tarPos.x + tarDiv.width() / 2;
            tarPos.y1 = tarPos.y + tarDiv.height() / 2;
            tarFirst = $main.eq(0); // 获得第一个元素
            tarFirstX = tarFirst.offset().left + thidDivHalfW; // 第一个元素对象的中心纵坐标
            tarFirstY = tarFirst.offset().top + thidDivHalfH; // 第一个元素对象的中心横坐标

            // 根据 拖拽对象x坐标 与 目标元素对象x坐标 对比，来显示 虚线div 在节点前、后出现的位置
            if (lastPos.x > tarPos.x) {

                // 判断要插入目标元素的 坐标后， 直接插入
                if (lastPos.x >= tarPos.x - thidDivHalfW && lastPos.x1 >= tarPos.x1 && lastPos.y >= tarPos.y - thidDivHalfH && lastPos.y1 >= tarPos.y1) {
                    tempDiv.insertAfter(tarDiv);
                }

                //拖拽对象 移动到第一个位置
                if (lastPos.x <= tarFirstX && lastPos.y <= tarFirstY) {
                    tempDiv.insertBefore(tarFirst);
                }

            } else {

                //拖拽对象 移动到第一个位置
                if (lastPos.x <= tarFirstX && lastPos.y <= tarFirstY) {
                    tempDiv.insertBefore(tarFirst);
                }

                // 判断要插入目标元素的 坐标后， 直接插入
                if (lastPos.x >= tarPos.x - thidDivHalfW && lastPos.x1 >= tarPos.x1 && lastPos.y >= tarPos.y - thidDivHalfH && lastPos.y1 >= tarPos.y1) {
                    tempDiv.insertAfter(tarDiv);
                }

            }

        });
    });
}