使用JavaScript怎么實(shí)現(xiàn)一個(gè)圖層拖拽功能

這篇文章將為大家詳細(xì)講解有關(guān)使用JavaScript怎么實(shí)現(xiàn)一個(gè)圖層拖拽功能，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

汨羅網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,汨羅網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為汨羅千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請找那個(gè)售后服務(wù)好的汨羅做網(wǎng)站的公司定做！

1.需求分析：設(shè)計(jì)一個(gè)元素，可以跟隨鼠標(biāo)的移動(dòng)，元素也進(jìn)行移動(dòng)，并且能夠在鼠標(biāo)按上與按下元素的時(shí)候，元素同樣可以進(jìn)行改變樣式顏色。

2. 設(shè)計(jì)思路：先是需要獲取元素，給元素綁定鼠標(biāo)按下的事件，在綁定的事件中，兼容event事件，獲取鼠標(biāo)的坐標(biāo)和元素的坐標(biāo)，通過鼠標(biāo)的坐標(biāo)減去元素的坐標(biāo)就可以得到鼠標(biāo)在元素中的坐標(biāo)。在綁定事件中，寫上一個(gè)元素的移動(dòng)事件，獲取元素的移動(dòng)坐標(biāo)。最后，在鼠標(biāo)按上的事件函數(shù)中，可以調(diào)用元素的移動(dòng)事件就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>圖層拖拽</title>
 <style>
 .box {
 width: 200px;
 height: 200px;
 background-color: skyblue;
 border: 2px solid #ccc;
 cursor: pointer;
 position: absolute;
 top: 20px;
 left: 100px;
 }
 </style>
</head>
<body>
<div class="box" id="box"></div>
</body>
<script>
 var box = document.getElementById("box");
 box.onmousedown = function(env){
 // 兼容event事件
 var env = env || window.event;
 // 獲取鼠標(biāo)的坐標(biāo)
 var x = env.clientX;
 var y = env.clientY;
 // 獲取元素的坐標(biāo)
 var left = box.offsetLeft;
 var top = box.offsetTop;
 // 獲取鼠標(biāo)在元素中的坐標(biāo)
 var x_left = x - left;
 var y_top = y -top;
 // 鼠標(biāo)點(diǎn)擊后改變顏色
 box.style.background = "red";
 // 元素的移動(dòng)事件函數(shù)
 box.onmousemove = function(env){
 // 兼容event事件
 var env = env || window.event;
 // 獲取元素移動(dòng)時(shí)的鼠標(biāo)的坐標(biāo)
 var x = env.clientX;
 var y = env.clientY;
 // 元素的移動(dòng)坐標(biāo)
 box.style.left = (x - x_left)+"px";
 box.style.top = (y - y_top)+"px";
 }
 };
 // 鼠標(biāo)彈出的事件函數(shù)
 box.onmouseup = function(){
 box.style.background = "skyblue";
 // 在鼠標(biāo)彈出后再次調(diào)用元素的鼠標(biāo)移動(dòng)事件
 box.onmousemove = function(){};

 };
</script>
</html>

關(guān)于使用JavaScript怎么實(shí)現(xiàn)一個(gè)圖層拖拽功能就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁題目：使用JavaScript怎么實(shí)現(xiàn)一個(gè)圖層拖拽功能
文章出自：http://jinyejixie.com/article20/pocgco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、、網(wǎng)站導(dǎo)航、微信公眾號、網(wǎng)站改版

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

使用JavaScript怎么實(shí)現(xiàn)一個(gè)圖層拖拽功能