JavaScript實現(xiàn)鼠標(biāo)拖拽效果
本文實例為大家分享了JavaScript實現(xiàn)鼠標(biāo)拖拽效果的具體代碼，供大家參考，具體內(nèi)容如下
這次的效果圖如下：
我認(rèn)為這個實驗的難點是保持盒子和鼠標(biāo)的相對位置不變，通過鼠標(biāo)按下和移動來實現(xiàn)拖拽的效果
如何實現(xiàn)拖拽的效果呢？
我們需要用到三個函數(shù)： onmousedown、onmousemove、onmouseup，分別表示鼠標(biāo)按下、鼠標(biāo)移動、鼠標(biāo)抬起
在鼠標(biāo)按下的回調(diào)函數(shù)中，我們需要通過clientX和clientY獲取鼠標(biāo)的初始位置，通過offsetLeft和offsetTop獲取盒子的初始位置，然后計算鼠標(biāo)初始位置和盒子初始位置的差值；
在鼠標(biāo)移動的回調(diào)函數(shù)中，我們需要根據(jù)鼠標(biāo)的位置和之前計算得到的差值來獲取盒子現(xiàn)在的位置，然后改變其left和top值，不要忘記將position設(shè)置為absolute（因為我就忘記了。。。)
在鼠標(biāo)抬起的回調(diào)函數(shù)中，我們需要清除鼠標(biāo)移動和鼠標(biāo)抬起，通過將onmousemove和onmouseup值設(shè)置為null即可
還要注意！?。?/strong>
鼠標(biāo)移動函數(shù)和抬起函數(shù)均要寫在鼠標(biāo)按下函數(shù)中，因為我們是要在鼠標(biāo)按下這個動作之后來設(shè)計之后的行為，而且很重要的一點是：
鼠標(biāo)按下函數(shù)是div的，鼠標(biāo)移動和鼠標(biāo)抬起是document的
因為我們的意思并不是鼠標(biāo)在div中移動，而是在整個頁面移動
重點大概是這些了，下面是代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
background-color: aquamarine;
border-radius: 14px;
box-shadow: 2px 2px 6px rgba(0,0,0,.3);
/* 好家伙 都沒設(shè)置定位 就想移動 改變left。。。 */
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
let box=document.getElementById("box");
box.onmousedown=function(event){
let disx=event.clientX-box.offsetLeft;
let disy=event.clientY-box.offsetTop;
//此處不是box.onmousemove，是document.onmousemove
document.onmousemove=function(event){
box.style.left=event.clientX-disx+'px';
box.style.top=event.clientY-disy+'px';
}
//要寫在ommousedown里面
document.onmouseup=function(){
//這倆都要置為null
document.onmousemove=null;
document.onmouseup=null;
return false;
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文為大家介紹下使用js仿新浪微博登陸郵箱提示效果，具體實現(xiàn)代碼如下，感興趣的朋友可以參考下，希望對大家有所幫組2013-08-08
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單可拖動的模態(tài)框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript學(xué)習(xí)總結(jié)之正則的元字符和一些簡單的應(yīng)用
這篇文章主要介紹了JavaScript學(xué)習(xí)總結(jié)之正則的元字符和一些簡單的應(yīng)用,需要的朋友可以參考下2017-06-06
javascript基礎(chǔ)練習(xí)之翻轉(zhuǎn)字符串與回文
最近在學(xué)習(xí)的時候到了基礎(chǔ)算法這一章節(jié)，讓我對js內(nèi)置對象方法的掌握還有思維邏輯都得到了提升，所借此機會來寫一寫學(xué)習(xí)心得和總結(jié)。下面這篇文章主要介紹了利用javascript實現(xiàn)翻轉(zhuǎn)字符串與回文的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
JavaScript獲取function所有參數(shù)名的方法
本文使用javascript獲取function所有參數(shù)名的方法，對js獲取function所有參數(shù)名感興趣的朋友一起學(xué)習(xí)吧2015-10-10
這篇文章主要分享一段了Google Maps API地圖應(yīng)用示例，做項目中經(jīng)常會使用到，非常的簡單，有需要的朋友可以參考下2014-10-10
這篇文章主要介紹了JavaScript中的原型鏈prototype介紹,本文講解了訪問原型對象的3種方法,判斷兩個對象間是否存在原型鏈關(guān)系的方法等,需要的朋友可以參考下2014-12-12
多瀏覽器的彈出層效果核心代碼。需要的朋友可以測試下這個是從正在使用的網(wǎng)站中扒下來的。2009-09-09
BootStrap Datepicker 插件修改為默認(rèn)中文的實現(xiàn)方法
bootstrap-datepicker 是一個非常優(yōu)秀的時間選擇插件，默認(rèn)是英文顯示日期的，通過下面幾個小修改讓其支持默認(rèn)中文。下面通過本文給大家介紹BootStrap Datepicker 插件修改為默認(rèn)中文的實現(xiàn)方法，一起看看吧2017-02-02
這篇文章主要介紹了ES6 class的應(yīng)用,結(jié)合實例形式分析了class在ES6面向?qū)ο蟪绦蛟O(shè)計中定義類的相關(guān)操作技巧,需要的朋友可以參考下2019-06-06