原生JS實(shí)現(xiàn)拖拽功能
更新時(shí)間：2020年12月16日 09:56:37 作者：Dreamer_xr
這篇文章主要為大家介紹了JS實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS實(shí)現(xiàn)拖拽功能的具體代碼，供大家參考，具體內(nèi)容如下
拖拽的原理：三個(gè)事件 onmousedown、onmousemove、onmousemove
1、鼠標(biāo)按下，觸發(fā)onmousedown，獲取鼠標(biāo)坐標(biāo)x,y，獲取元素坐標(biāo)x,y
通過(guò)event.clientX、event.clientY獲取鼠標(biāo)位置的坐標(biāo)
let x = e.clientX - box.offsetLeft; //鼠標(biāo)點(diǎn)擊坐標(biāo)距離盒子左邊緣的距離 let y = e.clientY - box.offsetTop; //鼠標(biāo)點(diǎn)擊坐標(biāo)距離盒子上邊緣的距離
2、設(shè)置元素left、top值，（元素要設(shè)置position:absolute）
box.style.left = ev.clientX - x + 'px'; box.style.top = ev.clientY - y + 'px';
3、放開(kāi)鼠標(biāo)取消dom事件
下面是詳細(xì)代碼：我只開(kāi)了橫向移動(dòng)
<!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; //鼠標(biāo)點(diǎn)擊坐標(biāo)距離盒子左邊緣的距離
let y = e.clientY - box.offsetTop; //鼠標(biāo)點(diǎn)擊坐標(biāo)距離盒子上邊緣的距離
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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JQuery Dialog(JS 模態(tài)窗口,可拖拽的DIV)
- Sortable.js拖拽排序使用方法解析
- js實(shí)現(xiàn)拖拽效果
- javascript實(shí)現(xiàn)移動(dòng)端上的觸屏拖拽功能
- 使用js實(shí)現(xiàn)的簡(jiǎn)單拖拽效果
- JS實(shí)現(xiàn)漂亮的窗口拖拽效果(可改變大小、最大化、最小化、關(guān)閉)
- JS組件Bootstrap Table表格行拖拽效果實(shí)現(xiàn)代碼
- 使用javaScript實(shí)現(xiàn)鼠標(biāo)拖拽事件
- js完美的div拖拽實(shí)例代碼
- Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight屬性
相關(guān)文章
代碼整體結(jié)構(gòu)是執(zhí)行速度的決定因素之一，代碼量少不一定運(yùn)行速度快，代碼量多也不一定運(yùn)行速度慢。本篇文章將對(duì)js的算法和流程控制進(jìn)行介紹，下面跟著小編一起來(lái)看下吧2016-12-12
JavaScript操作Oracle數(shù)據(jù)庫(kù)示例
這篇文章主要介紹了JavaScript操作Oracle數(shù)據(jù)庫(kù)示例,本文使用ActiveXObject實(shí)現(xiàn)訪問(wèn)Oracle數(shù)據(jù)庫(kù),需要的朋友可以參考下2015-03-03
這篇文章主要給大家介紹了如何通過(guò)一篇文章快速?gòu)牧憧焖偕鲜諶ollup的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
我見(jiàn)過(guò)最全的個(gè)人js加解密功能頁(yè)面
利用js進(jìn)行加解密是我們經(jīng)常會(huì)遇到的一個(gè)功能，本文給大家介紹的是我目前見(jiàn)到的最全的個(gè)人js加解密功能頁(yè)面，分享出來(lái)供大家參考學(xué)習(xí)，需要的朋友們隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2007-12-12
發(fā)現(xiàn)我JS真的還有很多要學(xué)，下面只是我的練習(xí)作品，代碼很多是網(wǎng)上的。2008-07-07
淺談JavaScript中定義變量時(shí)有無(wú)var聲明的區(qū)別
這篇文章主要介紹了JavaScript中定義變量時(shí)有無(wú)var聲明的區(qū)別分析以及示例分享,需要的朋友可以參考下2014-08-08
原生JS實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了根據(jù)配置文件加載js依賴(lài)模塊,解決方法是筆者自己的思路，拋磚引玉，需要的朋友可以參考下2014-12-12
jquery在Chrome下獲取圖片的長(zhǎng)寬問(wèn)題解決
需要獲得圖片的長(zhǎng)寬，在IE、FireFox下均正常，就TMD在Chrome中不行，有人說(shuō)是Chrome版本的問(wèn)題，最終終于找到了解決方法，在這與大家分享下2013-03-03
JS實(shí)現(xiàn)520 表白簡(jiǎn)單代碼
本文是小編基于js實(shí)現(xiàn)的520表白代碼，代碼簡(jiǎn)單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-05-05