jquery拖拽排序

最新推荐文章于 2023-07-20 11:19:49 发布

纯洁的小新

最新推荐文章于 2023-07-20 11:19:49 发布

阅读量1.4k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_44872773/article/details/118154130

版权

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>拖拽排序</title>
    <style>
      body, div {
    margin: 0;
    paading: 0;
    font-size: 12px;
    }

    body {
    width: 100%;
    margin: 0 auto;
    }

    .drag_module_box {
    width: 100%;
    height: auto;
    margin: 25px 0 0 0;
    padding: 5px;
    border: 1px solid #f00;
    }

    .drag_module_box1 {
    width: 100%;
    height: auto;
    margin: 25px 0 0 0;
    padding: 5px;
    border: 1px solid #f00;
    }

    .drag_module_main {
    position: static;
    width: 100%;
    height: 80px;
    margin-bottom: 5px;
    border: 1px solid blue;
    background: #ccc;
    user-select: none;
    }

    .drag_module_maindash {
    position: absolute;
    width: 100%;
    height: 80px;
    margin-bottom: 5px;
    border: 1px dashed blue;
    background: #ececec;
    opacity: 0.7;
    }

    .drag_module_hide {
    width: 100%;
    height: 80px;
    margin-bottom: 5px;
    }

    .drag_module_dash {
    position: static;
    width: 100%;
    height: 80px;
    margin-bottom: 5px;
    border: 1px dashed #f00;
    }

    </style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  </head>
  <body>
    <div class="drag_module_box" id="drag_module_box1"></div>
    <script type="text/javascript">
      var flag = false;
      var list = ['1', '2', '3', '4', '5'];
      for (var i = 0; i < 5; i++) {
        falg = true;
        $("#drag_module_box1").append("<div class='drag_module_main' id='main'+" + i + ">" + i + "</div>");
        //		$("#drag_module_box1").append("<tr class='drag_module_main'> <td>"+i+"</td></tr>");
      }

      if (falg) {
        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 theDiv = null,
          move = false,
          choose = false; //拖拽对象 拖拽状态 选中状态
        var theDivId = 0,
          theDivHeight = 0,
          theDivHalf = 0,
          tarFirstY = 0; //拖拽对象的索引、高度的初始化。
        var tarDiv = null,
          tarFirst,
          tempDiv = null; //要插入的目标元素的对象, 临时的虚线对象
        var initPos = {
          x: 0,
          y: 0
        };

        var maxTop = $(".drag_module_main:last").offset().top; //最大类容坐标
        $(".drag_module_main").each(function() {
          $(this).mousedown(function(event) {
            //清空未正常删除的tempDiv
            if (tempDiv != null) {
              tempDiv.remove();
              tempDiv = null;
            }
            choose = true;
            //拖拽对象
            theDiv = $(this);
            //记录拖拽元素初始位置
            initPos.x = theDiv.offset().left;
            initPos.y = theDiv.offset().top;

            //鼠标元素相对偏移量
            range.x = event.pageX - theDiv.offset().left;
            range.y = event.pageY - theDiv.offset().top;

            theDivId = theDiv.index();
            theDivHeight = theDiv.height();
            theDivHalf = theDivHeight / 2;

            theDiv.attr("class", "drag_module_maindash");
            theDiv.css({
              left: initPos.x + 'px',
              top: initPos.y + 'px'
            });
            // 创建新元素 插入拖拽元素之前的位置(虚线框)
            $("<div class='drag_module_dash'></div>").insertBefore(theDiv);
            tempDiv = $(".drag_module_dash");
          });
        });

        $(".drag_module_box").mousemove(function(event) {
          if (!choose) return false;
          move = true;
          lastPos.x = event.pageX - range.x;
          lastPos.y = event.pageY - range.y;
          lastPos.y1 = lastPos.y + theDivHeight;

          //判断拖拽元素，禁止超出范围
          if (lastPos.x != 0) {
            lastPos.x = 0;
          }
          if (lastPos.y <= 0) {
            lastPos.y = 0;
          }
          if (lastPos.y >= maxTop) {
            lastPos.y = maxTop;
          }
          // 拖拽元素随鼠标移动
          theDiv.css({
            left: lastPos.x + 'px',
            top: lastPos.y + 'px'
          });
          // 拖拽元素随鼠标移动 查找插入目标元素
          var $main = $('.drag_module_main'); // 局部变量：按照重新排列过的顺序 再次获取 各个元素的坐标，
          $main.each(function() {
            tarDiv = $(this);
            tarPos.x = tarDiv.offset().left;
            tarPos.y = tarDiv.offset().top;
            tarPos.y1 = tarPos.y + tarDiv.height() / 2;
            tarFirst = $main.eq(0); // 获得第一个元素
            tarFirstY = tarFirst.offset().top + theDivHalf; // 第一个元素对象的中心纵坐标
            //拖拽对象 移动到第一个位置
            if (lastPos.y <= tarFirstY) {
              tempDiv.insertBefore(tarFirst);
            }
            //判断要插入目标元素的 坐标后， 直接插入
            if (lastPos.y >= tarPos.y - theDivHalf && lastPos.y1 >= tarPos.y1) {
              tempDiv.insertAfter(tarDiv);
            }
          });
        }).mouseup(function(event) {
          if (!choose) {
            return false;
          }
          if (!move) {
            theDiv.attr("class", "drag_module_main");
            tempDiv.remove(); // 删除新建的虚线div
            tempDiv = null;
            choose = false;
            return false;
          }
          theDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上
          theDiv.attr("class", "drag_module_main"); //恢复对象的初始样式
          tempDiv.remove(); // 删除新建的虚线div
          tempDiv = null;
          move = false;
          choose = false;
        });
      }
    </script>
  </body>
</html>

效果：
在这里插入图片描述
参考文章：
添加链接描述

纯洁的小新

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery拖拽排序

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>拖拽排序</title> <style> body, div { margin: 0; paading: 0; font-size: 12px; } body { width: 100%; margin: 0
复制链接

扫一扫