快捷導(dǎo)航

運(yùn)用js實(shí)現(xiàn)圖層拖拽的功能

更新時(shí)間：2019年05月24日 14:12:08 作者：舊城tk

js拖拽是常見(jiàn)的網(wǎng)頁(yè)效果,本文將從零開(kāi)始實(shí)現(xiàn)一個(gè)簡(jiǎn)單的js插件,下面和小編來(lái)一起學(xué)習(xí)一下吧

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)，通過(guò)鼠標(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>

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

您可能感興趣的文章: