九宫格拖拽

最新推荐文章于 2024-03-21 16:17:30 发布

remember_xiao

最新推荐文章于 2024-03-21 16:17:30 发布

阅读量313

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43139605/article/details/107586638

版权

本文介绍如何使用JavaScript实现一个九宫格布局中元素的拖拽互换功能。通过实例代码，帮助读者理解拖拽操作的实现过程。

摘要由CSDN通过智能技术生成

前言：又是每周一次的星期六，和往常的星期六也是并无两样，忙于学习忙于工作的人都是如此的乏累，明天休息好一天就大步向前，可以往回看，但不要陷进去，一直向前走，路自然就形成了，fighting
！！！

每周一句：人活着都是为了要表演，所以才失去了自我！—王小波

效果：九宫格的每一格子的拖拽互换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九宫格拖拽</title>
        <style>
        *{
            margin:0px;
            padding: 0px;
        }
        ul{
            width: 340px;
            height: 340px;
            border:1px solid red;
            margin:50px auto;
            position: relative;
        }
        li{
            width: 100px;
            height: 100px;
            list-style: none;
            background-color: #cccccc;
            color: #ffffff;
            line-height: 100px;
            font-size: 40px;
            text-align: center;
            border-radius: 10px;
            user-select: none;/*去除文本选中行为*/
            position: absolute;
        }
    </style>
</head>
<body>
    <ul>
        <li style="top:10px;left:10px">1</li>
        <li style="top:10px;left:120px">2</li>
        <li style="top:10px;left:230px">3</li>
        <li style="top:120px;left:10px">4</li>
        <li style="top:120px;left:120px">5</li>
        <li style="top:120px;left:230px">6</li>
        <li style="top:230px;left:10px">7</li>
        <li style="top:230px;left:120px">8</li>
        <li style="top:230px;left:230px">9</li>
    </ul>
</body>
</html>

JS代码

<script>
    /*
    * 思路：
    * 1、样式布局
    * 2、明确事件类型，onmousedown，onmousemove，onmouseup
    * 3、确定事件的绑定对象
    * 4、拖拽时是修改当前对象的偏移量，top，left
    * 5、确定拖拽的范围
    * 6、拖拽时移动是根据鼠标的位置来进行移动的
    * 7、onmousemove，onmouseup两个事件是需要包含在onmousedown里面
    * 8、盒子之间切换时，是根据拖拽盒子和哪个盒子的接触面积最大来决定切换
    * */
    //获取所有操作对象
    var ul=document.querySelector('ul')
    var lis=document.querySelectorAll('li')
    //颜色数组
    var ar1=['red','blue','gray','orange','pink','green','purple','gold','skyblue']

最低0.47元/天解锁文章

remember_xiao

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
九宫格拖拽

前言：又是每周一次的星期六，和往常的星期六也是并无两样，忙于学习忙于工作的人都是如此的乏累，明天休息好一天就大步向前，可以往回看，但不要陷进去，一直向前走，路自然就形成了，fighting！！！每周一句：人活着都是为了要表演，所以才失去了自我！—王小波效果：九宫格的每一格子的拖拽互换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>九宫
复制链接

扫一扫