js拖拽自动排列

最新推荐文章于 2024-06-28 10:48:53 发布

wade3po

最新推荐文章于 2024-06-28 10:48:53 发布

阅读量1.2k

点赞数 3

本文链接：https://blog.csdn.net/wade3po/article/details/102860499

版权

上一次写了拖拽，其实主要还是想实现拖拽之后实现自动排列，跟手机屏幕那样移动图标可以自动排列，先看效果：

很常见的一个效果，先说一下思路：

每一个元素都是绝对定位，初始化的时候是通过js去排列。

拖拽使用的方法跟上一篇文章一模一样。

定义了一个数组，每个元素的字段：

{el: elArr[i], sort: i, index: i}

el是这个元素，用于排列，也就是改变top和left，sort是元素排列的位置，index是当前元素的index，不会改变。

拖拽的时候，当鼠标点击选中当前的元素的时候，这个元素移动，当移动到另一个元素一半的时候，相当于要替换这个元素，我是以这样一个方法判断移动到哪一个位置：

let moveIndex = Math.round(x / 125) + Math.round(y / 125) * 5;

我元素的宽度和距离的宽度和是125，所以移动距离超过一半就四舍五入算加1，列方向也是一样，超过1那么元素就是要加一行的个数。

我定义了一个当前的index，如果移动到的index不等于初始化的index，那么就是要发生移动，当从大移动到小，在这个范围内的，所有排序都要加1，其他不变，如果从小移动到大，这个范围内排序都要减1，其他不变。然后当前的排序替换那个。还要判断，如果移动计算出来的index小于0就等于0，大于当前最大值就等于当前最大值。

选中当前要改变index，置于最上方，移动用的是transition使得缓和的变换，但是移动当前要使transition为0秒，否则延迟会脱离当前元素。

还是上代码，运行之后看看代码就很清楚了：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        *{

            padding:0;

            margin:0;

        }

        html, body{

            width:100%;

            height:100%;

        }

        .wrap{

            position: relative;

            width: 600px;

            height: 600px;

            margin: 100px auto;

            border: solid 1px red;

        }

        .wrap div{

            position:absolute;

            z-index: 1;

            width:100px;

            height:100px;

            background: red;

            transition: all .5s;

        }

    </style>

</head>

<body>



<div class="wrap" id="elWrap">

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

    <div>6</div>

    <div>7</div>

    <div>8</div>

    <div>9</div>

    <div>10</div>

</div>



<script>

  let index = 0;

    let elArr = document.getElementById('elWrap').children;

    let elList =[];

    //构造一个数组

    for(let i = 0;i < elArr.length;i++){

     elList.push({el: elArr[i], sort: i, index: i});

     elList[i].onclick = addEvent(elList[i]);

    }

    moveItem(elList);

    

    function addEvent(item) {

     item.el.addEventListener('mousedown',(e) => {

      item.el.style.zIndex = 2;

      item.el.style.transition = 'all 0s';

        let startX = e.pageX,

        startY = e.pageY,

        left = item.el.offsetLeft,

        top = item.el.offsetTop;

        

        let moveFun = (e) => {

         let X = e.pageX - startX + left;

         let Y = e.pageY - startY + top;

         item.el.style.left = `${X}px`;

         item.el.style.top = `${Y}px`;

         reRange(item, X, Y);

        };

        

        document.addEventListener('mousemove',moveFun);

      item.el.addEventListener('mouseup',() => {

          document.removeEventListener('mousemove',moveFun);

       item.el.style.zIndex = 1;

       item.el.style.transition = 'all .5s';

       moveItem(elList);

        });

      });

    }

    

    function reRange(item, x, y) {

     let moveIndex = Math.round(x / 125) + Math.round(y / 125) * 5;

        moveIndex = moveIndex < 0 ? 0 : moveIndex;

        moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;

        

     if(moveIndex != index){

      index = moveIndex;

      let currentSort = item.sort;

      for(let i = 0;i < elList.length;i++){

       if(currentSort < moveIndex){

        if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){

         elList[i].sort -= 1;

        };

       }else if(currentSort > moveIndex){

        if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){

         elList[i].sort += 1;

        };

       }

      };

      elList[item.index].sort = moveIndex;

      moveItem(elList);

     }

    }

    //排列

    function moveItem(elList) {

        for(let i = 0;i < elList.length;i++){

            elList[i].el.style.left = elList[i].sort % 5 * 125 + 'px';

            elList[i].el.style.top = parseInt(elList[i].sort / 5) * 125 + 'px';

        }

    }

</script>

</body>

</html>