原生JS實現(xiàn)拖拽功能

更新時間：2020年12月16日 09:56:37 作者：Dreamer_xr

這篇文章主要為大家介紹了JS實現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)拖拽功能的具體代碼，供大家參考，具體內(nèi)容如下

拖拽的原理：三個事件 onmousedown、onmousemove、onmousemove

1、鼠標按下，觸發(fā)onmousedown，獲取鼠標坐標x,y，獲取元素坐標x,y

通過event.clientX、event.clientY獲取鼠標位置的坐標

let x = e.clientX - box.offsetLeft; //鼠標點擊坐標距離盒子左邊緣的距離
let y = e.clientY - box.offsetTop; //鼠標點擊坐標距離盒子上邊緣的距離

2、設置元素left、top值，（元素要設置position:absolute）

box.style.left = ev.clientX - x + 'px';
box.style.top = ev.clientY - y + 'px';

3、放開鼠標取消dom事件

下面是詳細代碼：我只開了橫向移動

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 #box {
 width: 100px;
 height: 100px;
 background: red;
 position: absolute
 }
 
 </style>
</head>
 
<body style="position: relative;overflow: hidden;">
 <div id="box">
 
 </div>
 
 <script>
 window.onload = function () {
 let box = document.getElementById('box')
 box.onmousedown = function (ev) {
 let e = ev || event;
 let x = e.clientX - box.offsetLeft; //鼠標點擊坐標距離盒子左邊緣的距離
 let y = e.clientY - box.offsetTop; //鼠標點擊坐標距離盒子上邊緣的距離
 document.onmousemove = function (ev) {
  let e = ev || event;
  box.style.left = ev.clientX - x + 'px';
  box.style.top = ev.clientY - y + 'px';
  
  let bodyScreenX = ev.screenX
  let bodyClientWidth = document.body.clientWidth
  
  document.onmouseup = function (ev) {
  if (ev.clientX - x < 0) {
  box.style.left = 0
  } else if (bodyScreenX > bodyClientWidth) {
  box.style.right = 0
  box.style.left = bodyClientWidth - 100 + 'px'
  }
  document.onmousemove = null;
  document.onmouseup = null;
  }
 }
 }
 }
 
 </script>
</body>
 
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: