JS實現(xiàn)鼠標按下拖拽效果
更新時間：2020年07月23日 15:08:59 作者：York_Ice
這篇文章主要為大家詳細介紹了JS實現(xiàn)鼠標按下拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
原生JS實現(xiàn)鼠標按下拖拽效果，供大家參考，具體內(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>鼠標拖動</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>
//定義變量儲存div的寬高
var obj_w, obj_h;
//定義一個變量判斷是否執(zhí)行移動函數(shù)
var mouseDown = false;
//鼠標按下函數(shù)
function downDiv(obj) {
//獲取div的寬高
obj_w = obj.offsetWidth;
obj_h = obj.offsetHeight;
//鼠標
var e = event || window.event;
//e.clientX/Y 是獲取鼠標相對瀏覽器的位置；將div中心自動居中到鼠標
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)
//按下時為ture,松開時為false，以判斷是否執(zhí)行執(zhí)行mouveDiv
mouseDown = true;
}
//鼠標移動函數(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)
}
}
//鼠標松開函數(shù)
function upDiv(obj) {
mouseDown = false;
}
</script>
</body>
</html>
更多精彩文章請點擊專題： Javascript拖拽特效匯總
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要介紹了小程序中手機號識別的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
ES6中的Promise對象與async和await方法詳解
Promise是es6引入的異步編程薪解決方案，語法上promise就是一個構(gòu)造函數(shù)，用來封裝異步操作病可以獲取其成功或失敗的結(jié)果，這篇文章主要介紹了ES6中的Promise對象與async和await方法,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了在Iframe中獲取父窗口中表單的值(示例代碼)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)復選框全選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
json對象和formData相互轉(zhuǎn)換的方式詳解
我們有兩種常見的傳參方式： JSON 對象格式和 formData 格式，但是一些場景是需要我們對這兩種數(shù)據(jù)格式進行轉(zhuǎn)換的，這篇文章主要介紹了json對象和formData相互轉(zhuǎn)換的方式詳解,需要的朋友可以參考下2023-02-02
省市區(qū)三級聯(lián)動下拉框菜單javascript版
這篇文章主要給大家介紹了javascript實現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單，有需要的朋友可以參考下2015-08-08
JS中async/await實現(xiàn)異步調(diào)用的方法
這篇文章主要介紹了async/await實現(xiàn)異步調(diào)用的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
今天是看到UCDChina上的一篇文章文章 ，是關于SNS的用戶體驗問題，發(fā)覺文中提到的第一個細節(jié)，UCHOME就做的不好，于是改進了一下。2011-01-01
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)電子簽名功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
JavaScript監(jiān)控埋點的實現(xiàn)與詳細用法
埋點（Event Tracking）是用戶行為監(jiān)控的一種技術手段,通常用于收集用戶在網(wǎng)站或應用中的操作數(shù)據(jù),例如點擊、頁面瀏覽、滾動等,本文給大家介紹了JavaScript監(jiān)控埋點的實現(xiàn)與詳細用法,需要的朋友可以參考下2024-10-10