• JS 拖拽事件

     1.drag等拖拽事件

    拖放是由拖动与释放两部分组成，拖放事件也分为被拖动元素的相关事件，和容器的相关事件。 被拖动元素的相关事件如下所示：

    被拖动元素相关事件: 

    事件描述
    dragstart用户开始拖动元素时触发
    drag元素正在拖动时触发
    dragend用户完成元素拖动后触发

    容器相关事件如下所示：

    事件描述
    dragenter当被鼠标拖动的对象进入目标容器时触发此事件
    dragover当被拖动的对象在目标容器范围内拖动时触发此事件
    dragleave当被鼠标拖动的对象离开目标容器时触发此事件
    drop在一个拖动过程中，释放鼠标键到目标容器时触发此事件

    实现拖拽

    1.首先给标签添加draggable="true"属性表明标签可拖拽。

    <div draggable="true" id="7">7div>

    2.通过标签绑定dragstart事件,会在用户拖动标签时开始触发。我们将拖拽标签的id存入其中。

    1.   // 拖动元素开始触发
    2.         div.ondragstart = function (e) {
    3.             e.dataTransfer.setData('Text', e.target.id)
    4.             oldPar = div.parentNode // 记录父节点
    5.         }

    3.在放置拖动元素的容器上绑定一个 dragover 事件，这个事件用于规定在何处放置被拖动的数据。默认情况下，是无法将一格元素放置到另外一个元素里面的，所以如果需要设置允许放置，则要在 ondragover 事件中加上 e.preventDefault() 方法来阻止默认行为。

    1.  dragBox.ondragover = function (e) {
    2.             e.preventDefault()
    3.         }

    4. 将元素拖拽放置在容器中(在容器中松开鼠标),在在容器中绑定一个drop 事件中,同样需要调用 e.preventDefault() 方法来阻止默认行为。然后可以通过 dataTransfer.getData("Text"); 方法获取之前的 drag(event) 函数中保存的信息，也就是被拖动元素的 id。接着通过 容器dom实例.appendChild() 方法为将拖动元素作为元素容器的子元素追加到元素容器中，这样就能成功实现拖放。

    1.      // 容器内放置拖动元素
    2.         dragBox.ondrop = function (e) {
    3.             e.preventDefault()
    4.             let data = e.dataTransfer.getData("Text") // 这么说这是一个静态对象
    5.             let newChil = document.getElementById(data)
    6.             dragBox.appendChild(newChil) // 追加子元素
    7.  
    8.         }

    案例

    效果展示

     代码实现

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="utf-8">
    6.     <title>拖拽title>
    7.     <style type="text/css">
    8.         .drag-box {
    9.             display: flex;
    10.         }
    11.  
    12.         .drag-box ul div {
    13.             margin: 10px 0;
    14.             width: 100px;
    15.             height: 100px;
    16.             border: 1px solid black;
    17.             text-align: center;
    18.             line-height: 100px;
    19.             font-size: 20px;
    20.             font-weight: bolder;
    21.             background-image: linear-gradient(transparent,
    22.                     rgba(0, 0, 0, 0.5));
    23.             transition: all 2s;
    24.         }
    25.     style>
    26. head>
    27.  
    28. <body>
    29.     <div class="drag-box">
    30.         <ul>
    31.             <div draggable="true" id="1">1div>
    32.         ul>
    33.         <ul>
    34.             <div draggable="true" id="2">2div>
    35.         ul>
    36.         <ul>
    37.             <div draggable="true" id="3">3div>
    38.         ul>
    39.         <ul>
    40.             <div draggable="true" id="4">4div>
    41.         ul>
    42.         <ul>
    43.             <div draggable="true" id="5">5div>
    44.         ul>
    45.         <ul>
    46.             <div draggable="true" id="6">6div>
    47.         ul>
    48.         <ul>
    49.             <div draggable="true" id="7">7div>
    50.         ul>
    51.         <ul>
    52.             <div draggable="true" id="8">8div>
    53.         ul>
    54.         <ul>
    55.             <div draggable="true" id="9">9div>
    56.         ul>
    57.     div>
    58. body>
    59. <script>
    60.     let dragBoxs = document.querySelectorAll('.drag-box>ul')
    61.     let divs = document.querySelectorAll('.drag-box div')
    62.     let oldPar;
    63.     for (const div of divs) {
    64.         // 拖动元素开始触发
    65.         div.ondragstart = function (e) {
    66.             e.dataTransfer.setData('Text', e.target.id)
    67.             oldPar = div.parentNode // 记录父节点
    68.         }
    69.         // 拖动元素过程中触发
    70.         div.ondrag = function (e) {
    71.             e.target.style.opacity = "0"
    72.             oldPar.style.display = "none"
    73.         }
    74.         // 拖动元素完成后触发
    75.         div.ondragend = function (e) {
    76.             e.target.style.opacity = "1"
    77.             console.log(1);
    78.             oldPar.style.display = "block"
    79.         }
    80.     }
    81.  
    82.     // 容器事件
    83.     for (const dragBox of dragBoxs) {
    84.         // 拖动元素在目标容器内触发
    85.         dragBox.ondragover = function (e) {
    86.             e.preventDefault()
    87.         }
    88.         // 容器内放置拖动元素
    89.         dragBox.ondrop = function (e) {
    90.             e.preventDefault()
    91.             let data = e.dataTransfer.getData("Text") // 这么说这是一个静态对象
    92.             let newChil = document.getElementById(data)
    93.             let oldChil = dragBox.children[0]
    94.             // 判断盒子是否空元素
    95.             if (oldChil) {
    96.                 dragBox.appendChild(newChil) // 追加新的子元素，删除旧的子元素
    97.                 dragBox.removeChild(oldChil)
    98.                 oldPar.appendChild(oldChil)
    99.             } else {
    100.                 dragBox.appendChild(newChil)
    101.             }
    102.  
    103.         }
    104.     }
    105.  
    106.  
    107.  
    108.  
    109. script>
    110.  
    111. html>

    2. mousedown、mousemove、mouseup等事件实现拖拽与碰撞

    我们直接用一个案例来解释：

    效果展示

    ps: 还是有bug,目前找不出来。

    实现拖拽

    我们实现这个功能,需要3个事件:

    前提: 子元素是相对定位,容器是绝对定位，脱离文档流。

    1.按住鼠标 (mousedown),获取当前元素 offsetLeft 和offsetTop,当前鼠标的clientX、clientY,用鼠标坐标 - 元素的offsetLeft、offsetTop属性，求出鼠标-元素边界的距离.

    2.移动鼠标(monusemove),获取移动元素中鼠标的clientX、clientY 减去上边求出的鼠标到元素边界的距离 ,求出元素移动top、left值，赋给元素。

    3.松开鼠标(monuseup),将鼠标移动事件清除清除。

    实现碰撞挤开其他的元素

    下面有2个元素,判断2个元素是否碰撞,如果碰撞的情况非常多，我们可以考虑没碰撞的情况，下面满足任意一种情况就是没碰撞的。

     实现代码

    我们通过检测元素是否碰撞，元素之间间隙到一定距离;就将空隙距离返回。

    1.   // 碰撞检测事件
    2.     // 拖拽元素为node2
    3.     function knock(node1, node2) {
    4.         var l1 = node1.offsetLeft;
    5.         var r1 = node1.offsetLeft + node1.offsetWidth;
    6.         var t1 = node1.offsetTop;
    7.         var b1 = node1.offsetTop + node1.offsetHeight;
    8.         var l2 = node2.offsetLeft;
    9.         var r2 = node2.offsetLeft + node2.offsetWidth;
    10.         var t2 = node2.offsetTop;
    11.         var b2 = node2.offsetTop + node2.offsetHeight;
    12.         // 左空隙 
    13.         let _left = l2 - r1
    14.         // 右空隙
    15.         let _right = l1 - r2
    16.         // 上空隙
    17.         let _top = t2 - b1
    18.         // 下空隙
    19.         let _bottom = t1 - b2
    20.         // 没碰撞
    21.         let obj = {};
    22.         // 没碰撞;大于1px 小于15px应该顶撞他;其余情况没考虑，统一设为 0px(为啥1 -15 之间，鼠标移动太快，检测有延迟)
    23.         if (l2 > r1 || r2 < l1 || t2 > b1 || b2 < t1) {
    24.  
    25.             // 左空隙 >=10 <=20
    26.             if (_left >= 1 && _left <= 15) {
    27.                 obj.left = _left
    28.             } else {
    29.                 obj.left = 0
    30.             }
    31.             // 右空隙 大于10
    32.             if (_right >= 1 && _right <= 15) {
    33.                 obj.right = _right
    34.             } else {
    35.                 obj.right = 0
    36.             }
    37.             // 上空隙 大于10
    38.             if (_top >= 1 && _top <= 15) {
    39.                 obj.top = _top
    40.             } else {
    41.                 obj.top = 0
    42.             }
    43.             // 下空隙 大于10
    44.             if (_bottom >= 1 && _bottom <= 15) {
    45.                 obj.bottom = _bottom
    46.             } else {
    47.                 obj.bottom = 0
    48.             }
    49.             return obj
    50.         } else {
    51.             // 上面理论上，元素之间有空隙;
    52.             return true
    53.         }

     设置bd函数, 将拖拽div，和div数组传入,遍历div数组,然后调用上面knock()方法，来判断是否碰撞；

    将拖拽div距离其他标签的div句空隙距离，将距离设置给其他div,从而实现碰撞撞开其他元素。

    1. // 给拖拽中div绑定碰撞函数，并根据返回值，拖拽div与其他div之间隔出空隙
    2.     function bd(div1, divs) {
    3.         let c_divs = []
    4.         for (const div of divs) {
    5.             c_divs.push(div)
    6.         }
    7.         // 遍历删除div1
    8.         divs1 = c_divs.filter(div =>
    9.             div1 != div
    10.         )
    11.         // 记录与他碰撞的div元素和是否碰撞
    12.         for (const div of divs1) {
    13.             let item = {}
    14.             let isKnock = knock(div, div1)
    15.             // 拿出2个div间隙
    16.             if (isKnock != true) {
    17.                 let { left, right, top, bottom } = isKnock
    18.                 let { offsetLeft, offsetTop, offsetHeight, offsetWidth } = div
    19.  
    20.                 if (left > 0) {
    21.                     let _left;
    22.                     let left1 = offsetLeft - left;
    23.                     _left = left1 >= 0 ? left1 : _left
    24.                     div.style.left = _left + 'px'
    25.                 }
    26.                 if (right > 0) {
    27.                     let _right;
    28.                     let right1 = div1.offsetLeft + div1.offsetWidth + right;
    29.                     _right = right1 <= body.offsetWidth - offsetWidth ? right1 : _right
    30.                     div.style.left = _right + 'px'
    31.                 }
    32.                 if (top > 0) {
    33.                     let _top;
    34.                     let top1 = offsetTop - top
    35.                     _top = top1 >= 0 ? top1 : _top
    36.                     div.style.top = _top + 'px'
    37.                 }
    38.                 if (bottom > 0) {
    39.                     let _bottom;
    40.                     let bottom1 = div1.offsetTop + div1.offsetHeight + bottom
    41.                     _bottom = bottom1 <= body.offsetHeight - offsetHeight ? bottom1 : _bottom
    42.                     div.style.top = _bottom + 'px'
    43.                 }
    44.             }
    45.         }
    46.     }

    完整代码

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <style>
    8.         body {
    9.             position: absolute;
    10.             height: 98vh;
    11.             width: 98vw;
    12.             border: 2px solid black;
    13.         }
    14.  
    15.         div {
    16.             position: absolute;
    17.             margin: 5px;
    18.             width: 100px;
    19.             height: 100px;
    20.             background-color: rebeccapurple;
    21.  
    22.  
    23.         }
    24.     style>
    25.     <title>页面拖动和碰撞title>
    26. head>
    27.  
    28. <body>
    29.     <div>1div>
    30.     <div>2div>
    31.     <div>3div>
    32.  
    33. body>
    34. <script>
    35.  
    36.     let divs = document.getElementsByTagName("div")
    37.     let body = document.getElementsByTagName("body")[0]
    38.  
    39.  
    40.     for (const div of divs) {
    41.         drag(div, divs)
    42.         // 帮主div绑定与其他div的碰撞事件
    43.     }
    44.     // for in 只能遍历对象
    45.  
    46.     // 给div 和其他div绑定碰撞函数
    47.     function bd(div1, divs) {
    48.         let c_divs = []
    49.         for (const div of divs) {
    50.             c_divs.push(div)
    51.         }
    52.         // 遍历删除div1
    53.         divs1 = c_divs.filter(div =>
    54.             div1 != div
    55.         )
    56.         // 记录与他碰撞的div元素和是否碰撞
    57.         for (const div of divs1) {
    58.             let item = {}
    59.             let isKnock = knock(div, div1)
    60.             // 拿出2个div间隙
    61.             let { left, right, top, bottom } = isKnock
    62.             // div
    63.             let { offsetLeft, offsetTop, offsetHeight, offsetWidth } = div
    64.  
    65.             if (left > 0) {
    66.                 let _left;
    67.                 let left1 = offsetLeft - left;
    68.                 _left = left1 >= 0 ? left1 : _left
    69.                 div.style.left = _left + 'px'
    70.             }
    71.             if (right > 0) {
    72.                 let _right;
    73.                 let right1 = div1.offsetLeft + div1.offsetWidth + right;
    74.                 _right = right1 <= body.offsetWidth - offsetWidth ? right1 : _right
    75.                 div.style.left = _right + 'px'
    76.             }
    77.             if (top > 0) {
    78.                 let _top;
    79.                 let top1 = offsetTop - top
    80.                 _top = top1 >= 0 ? top1 : _top
    81.                 div.style.top = _top + 'px'
    82.             }
    83.             if (bottom > 0) {
    84.                 let _bottom;
    85.                 let bottom1 = div1.offsetTop + div1.offsetHeight + bottom
    86.                 _bottom = bottom1 <= body.offsetHeight - offsetHeight ? bottom1 : _bottom
    87.                 div.style.top = _bottom + 'px'
    88.             }
    89.         }
    90.     }
    91.  
    92.     // js拖动事件
    93.     function drag(obj, divs) {
    94.         //当鼠标在被拖拽元素上按下，开始拖拽
    95.         obj.onmousedown = function (event) {
    96.             event = event || window.event;
    97.             //鼠标在元素中的偏移量等于 鼠标的clientX - 元素的offsetLeft
    98.             let { offsetLeft, offsetTop } = obj
    99.             // 设置小于0判断，防止移除边界
    100.             var ol = event.clientX - offsetLeft;
    101.             var ot = event.clientY - offsetTop
    102.  
    103.             let _left = 0;
    104.             let _top = 0;
    105.             //为document绑定一个onmousemove事件,鼠标移动事件
    106.             document.onmousemove = function (event) {
    107.                 bd(obj, divs) // 元素移动调用碰撞函数
    108.                 event = event || window.event;
    109.                 var left = event.clientX - ol;
    110.                 var top = event.clientY - ot;
    111.                 let { offsetWidth, offsetHeight } = body
    112.                 // 防止元素移出容器
    113.                 _left = left >= 0 && left <= offsetWidth - obj.offsetWidth ? left : _left
    114.                 _top = top >= 0 && top <= offsetHeight - obj.offsetHeight ? top : _top
    115.  
    116.                 //修改元素的位置 修改元素的位置只能通过 元素.style.属性 = "属性值";
    117.                 // 判断 > =0
    118.                 obj.style.left = _left + "px";
    119.                 obj.style.top = _top + "px";
    120.             };
    121.             //为document绑定一个鼠标松开事件onmouseup
    122.             document.onmouseup = function () {
    123.                 document.onmousemove = null;
    124.                 document.onmouseup = null;
    125.             };
    126.             return false;
    127.         };
    128.     }
    129.  
    130.     // 碰撞检测事件
    131.     // 拖拽元素为node2
    132.     function knock(node1, node2) {
    133.         var l1 = node1.offsetLeft;
    134.         var r1 = node1.offsetLeft + node1.offsetWidth;
    135.         var t1 = node1.offsetTop;
    136.         var b1 = node1.offsetTop + node1.offsetHeight;
    137.         var l2 = node2.offsetLeft;
    138.         var r2 = node2.offsetLeft + node2.offsetWidth;
    139.         var t2 = node2.offsetTop;
    140.         var b2 = node2.offsetTop + node2.offsetHeight;
    141.         // 左空隙 
    142.         let _left = l2 - r1
    143.         // 右空隙
    144.         let _right = l1 - r2
    145.         // 上空隙
    146.         let _top = t2 - b1
    147.         // 下空隙
    148.         let _bottom = t1 - b2
    149.         // 没碰撞
    150.         let obj = {};
    151.         // 没碰撞;大于1px 小于15px应该顶撞他;其余情况没考虑，统一设为 0px(为啥1 -15 之间，鼠标移动太快，检测有延迟)
    152.         if (l2 > r1 || r2 < l1 || t2 > b1 || b2 < t1) {
    153.  
    154.             // 左空隙
    155.             if (_left >= 1 && _left <= 15) {
    156.                 obj.left = _left
    157.             } else {
    158.                 obj.left = 0
    159.             }
    160.             // 右空隙 
    161.             if (_right >= 1 && _right <= 15) {
    162.                 obj.right = _right
    163.             } else {
    164.                 obj.right = 0
    165.             }
    166.             // 上空隙 
    167.             if (_top >= 1 && _top <= 15) {
    168.                 obj.top = _top
    169.             } else {
    170.                 obj.top = 0
    171.             }
    172.             // 下空隙 
    173.             if (_bottom >= 1 && _bottom <= 15) {
    174.                 obj.bottom = _bottom
    175.             } else {
    176.                 obj.bottom = 0
    177.             }
    178.             return obj
    179.         } else {
    180.             // 上面理论上，元素之间有空隙;
    181.             return true
    182.         }
    183.     }
    184.  
    185.  
    186. script>
    187.  
    188. html>

    参考资料: https://blog.csdn.net/horizon12/article/details/108650346

  • 相关阅读:
    关于前端地图笔记
    软考高级系统架构设计师系列之：深入理解设计模式
    Ribbon负载均衡算法
    网络服务退出一个问题的解析
    在 emacs 中如何将窗口的垂直分割改为水平分割
    idea 创建maven父子工程(spring cloud 组件教程大全 一)
    黑马JVM总结（九）
    水生植物拉丁文及缩写
    ubuntu系统安装配置gitlab+Jenkins+发布持续集成持续部署保姆级教程。
    【C++】const关键字的作用
  • 原文地址：https://blog.csdn.net/Qhx20040819/article/details/133235163