快捷導(dǎo)航

JS實(shí)現(xiàn)鼠標(biāo)按下拖拽效果

更新時(shí)間：2020年07月23日 15:08:59 作者：York_Ice

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)鼠標(biāo)按下拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

原生JS實(shí)現(xiàn)鼠標(biāo)按下拖拽效果，供大家參考，具體內(nèi)容如下

<!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>鼠標(biāo)拖動(dòng)</title>
 <style type="text/css">
 body {
  margin: 0;
 }

 div {
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: pink;
 }
 </style>
</head>

<body>

 <div onmousedown="downDiv(this)" onmousemove="moveDiv(this)" onmouseup="upDiv(this)">

 </div>



 <script>
 //定義變量?jī)?chǔ)存div的寬高
 var obj_w, obj_h;
 //定義一個(gè)變量判斷是否執(zhí)行移動(dòng)函數(shù)
 var mouseDown = false;

 //鼠標(biāo)按下函數(shù)
 function downDiv(obj) {
  //獲取div的寬高
  obj_w = obj.offsetWidth;
  obj_h = obj.offsetHeight;
  //鼠標(biāo)
  var e = event || window.event;
  //e.clientX/Y 是獲取鼠標(biāo)相對(duì)瀏覽器的位置；將div中心自動(dòng)居中到鼠標(biāo)
  obj.style.left = (e.clientX - obj_w / 2) + "px";
  obj.style.top = (e.clientY - obj_h / 2) + "px";
  console.log(obj.style.left, obj.style.top)
  //按下時(shí)為ture,松開時(shí)為false，以判斷是否執(zhí)行執(zhí)行mouveDiv
  mouseDown = true;

 }

 //鼠標(biāo)移動(dòng)函數(shù)
 function moveDiv(obj) {
  obj_w = obj.offsetWidth;
  obj_h = obj.offsetHeight;
  var e = event || window.event;
  console.log(e.clientX, e.clientY);
  console.log(obj_w, obj_h);
  if (mouseDown) {
  obj.style.left = (e.clientX - obj_w / 2) + "px";
  obj.style.top = (e.clientY - obj_h / 2) + "px";
  console.log(obj.style.left, obj.style.top)
  }

 }

 //鼠標(biāo)松開函數(shù)
 function upDiv(obj) {
  mouseDown = false;
 }

 </script>
</body>

</html>

更多精彩文章請(qǐng)點(diǎn)擊專題： Javascript拖拽特效匯總

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

小程序中手機(jī)號(hào)識(shí)別的示例
這篇文章主要介紹了小程序中手機(jī)號(hào)識(shí)別的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
ES6中的Promise對(duì)象與async和await方法詳解
Promise是es6引入的異步編程薪解決方案，語法上promise就是一個(gè)構(gòu)造函數(shù)，用來封裝異步操作病可以獲取其成功或失敗的結(jié)果，這篇文章主要介紹了ES6中的Promise對(duì)象與async和await方法,需要的朋友可以參考下
2022-12-12
在Iframe中獲取父窗口中表單的值(示例代碼)
這篇文章主要介紹了在Iframe中獲取父窗口中表單的值(示例代碼)。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-11-11
JavaScript實(shí)現(xiàn)復(fù)選框全選功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)復(fù)選框全選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
json對(duì)象和formData相互轉(zhuǎn)換的方式詳解
我們有兩種常見的傳參方式： JSON 對(duì)象格式和 formData 格式，但是一些場(chǎng)景是需要我們對(duì)這兩種數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換的，這篇文章主要介紹了json對(duì)象和formData相互轉(zhuǎn)換的方式詳解,需要的朋友可以參考下
2023-02-02
省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單javascript版
這篇文章主要給大家介紹了javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單，有需要的朋友可以參考下
2015-08-08
JS中async/await實(shí)現(xiàn)異步調(diào)用的方法
這篇文章主要介紹了async/await實(shí)現(xiàn)異步調(diào)用的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-08-08
改進(jìn)UCHOME的記錄發(fā)布，增強(qiáng)可訪問性用戶體驗(yàn)
今天是看到UCDChina上的一篇文章文章，是關(guān)于SNS的用戶體驗(yàn)問題，發(fā)覺文中提到的第一個(gè)細(xì)節(jié)，UCHOME就做的不好，于是改進(jìn)了一下。
2011-01-01
微信小程序?qū)崿F(xiàn)電子簽名功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)電子簽名功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-07-07
JavaScript監(jiān)控埋點(diǎn)的實(shí)現(xiàn)與詳細(xì)用法
埋點(diǎn)（Event Tracking）是用戶行為監(jiān)控的一種技術(shù)手段,通常用于收集用戶在網(wǎng)站或應(yīng)用中的操作數(shù)據(jù),例如點(diǎn)擊、頁面瀏覽、滾動(dòng)等,本文給大家介紹了JavaScript監(jiān)控埋點(diǎn)的實(shí)現(xiàn)與詳細(xì)用法,需要的朋友可以參考下
2024-10-10