原生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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
拖拽

相關(guān)文章

常見的JS字符串屬性與方法集錦
字符串的操作在js中非常頻繁,也非常重要,下面這篇文章主要給大家介紹了關(guān)于JS字符串屬性與方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-01-01
關(guān)于javaScript注冊click事件傳遞參數(shù)的不成功問題
在javaScript中給一個html元素注冊click事件處理函數(shù)時，比如給該處理函數(shù)傳3個參數(shù)?？墒遣还苁鞘褂孟旅婺欠N方式都不能給事件處理函數(shù)傳遞參數(shù)
2014-07-07
圖片動畫橫條廣告帶上下滾動的JS代碼
可以自定義廣告的圖片、鏈接、長、寬等。光標移到圖片上會出現(xiàn)左右箭頭，有需要的朋友可以參考一下
2013-10-10
JavaScript中document.forms[0]與getElementByName區(qū)別
在很多情況下JavaScript中document.forms[0]與getElementByName這兩種用法沒有區(qū)別，這片文章詳細的解釋了兩者的區(qū)別和用法，有興趣的朋友可以參考一下。
2015-01-01
JavaScript獲取客戶端IP的方法(新方法)
這篇文章主要介紹了JavaScript獲取客戶端IP的方法(新方法)的相關(guān)資料,需要的朋友可以參考下
2016-03-03
JS實現(xiàn)時間格式化的方式匯總
這篇文章介紹了JS實現(xiàn)時間格式化的方式，有需要的朋友可以參考一下
2013-10-10
微信小程序websocket聊天室的實現(xiàn)示例代碼
這篇文章主要介紹了微信小程序websocket聊天室的實現(xiàn)示例代碼，小程序本身對http、websocket等連接均有諸多限制，所以這次項目選擇了node.js自帶的ws模塊。感興趣的可以參考一下
2019-02-02
基于JS正則表達式實現(xiàn)模板數(shù)據(jù)動態(tài)渲染(實現(xiàn)思路詳解)
這篇文章主要介紹了基于JS正則表達式實現(xiàn)模板數(shù)據(jù)動態(tài)渲染 ,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-03-03
一些有關(guān)檢查數(shù)據(jù)的JS代碼
一些有關(guān)檢查數(shù)據(jù)的JS代碼...
2006-09-09
JavaScript中實現(xiàn)頁面跳轉(zhuǎn)的幾種常用方法總結(jié)
本文主要介紹了網(wǎng)頁開發(fā)中頁面跳轉(zhuǎn)的概念和重要性,及使用JS實現(xiàn)頁面跳轉(zhuǎn)的幾種常見方法,包括使用window.location.href,window.location.replace(),window.location.assign(),window.open(),form表單提交以及HTML的a標簽等方法實現(xiàn)頁面跳轉(zhuǎn),需要的朋友可以參考下
2024-10-10