運(yùn)用js實(shí)現(xiàn)圖層拖拽的功能
更新時(shí)間：2019年05月24日 14:12:08 作者：舊城tk
js拖拽是常見的網(wǎng)頁效果,本文將從零開始實(shí)現(xiàn)一個(gè)簡單的js插件,下面和小編來一起學(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)，通過鼠標(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>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文將詳細(xì)介紹JavaScript中“+”的一些錯(cuò)誤應(yīng)用，需要的朋友可以參考下2012-12-12
JavaScript中實(shí)現(xiàn)依賴注入的思路分享
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)依賴注入的思路分享,本文給出的解決方案包括獲取func的參數(shù)列表、根據(jù)參數(shù)列表尋找依賴、傳遞依賴項(xiàng)參數(shù)并實(shí)例化等3個(gè)步驟,需要的朋友可以參考下2015-01-01
詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象（1）
這篇文章主要介紹了JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象，對(duì)創(chuàng)建對(duì)象進(jìn)行了詳細(xì)描述，感興趣的小伙伴們可以參考一下2015-12-12
年底了各個(gè)公司都有抽獎(jiǎng)活動(dòng)，我也寫了一個(gè)超級(jí)簡單的代碼來實(shí)現(xiàn)抽獎(jiǎng)效果，這里沒有華麗的Css3效果，但卻有短小精悍的js代碼。2015-01-01
一篇文章帶你學(xué)會(huì)JavaScript計(jì)時(shí)事件
JS可以實(shí)現(xiàn)很多java代碼不易完成的功能,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章帶你學(xué)會(huì)JavaScript計(jì)時(shí)事件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
javascript計(jì)算星座屬相(十二生肖屬相)示例代碼
本文介紹了使用javascript計(jì)算星座和屬相的示例，這個(gè)可以用在用戶注冊(cè)的時(shí)候顯示出來，大家參考使用吧2014-01-01
JavaScript中的50+個(gè)實(shí)用工具函數(shù)小結(jié)
JavaScript可以做很多出色的事情，本篇文章給大家整理50+個(gè)實(shí)用工具函數(shù)，可以幫助你提高工作效率并可以幫助調(diào)試代碼，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕字體放大、縮小
字體可以調(diào)節(jié)大小，極大了滿足了用戶體驗(yàn)度，接下來通過本文給大家介紹JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕字體放大、縮小實(shí)例代碼，需要的朋友參考下吧2016-02-02
一個(gè)可以隨意添加多個(gè)序列的tag函數(shù)
由于在沒有規(guī)劃好的情況下寫的這個(gè)代碼，寫的比較粗糙，也沒有添加注釋。 JavaScript代碼和HTML完全分離；可以隨意添加多個(gè)子div標(biāo)簽，自動(dòng)擴(kuò)展2009-07-07
cocos2dx+lua實(shí)現(xiàn)橡皮擦功能
這篇文章主要為大家詳細(xì)介紹了cocos2dx+lua實(shí)現(xiàn)橡皮擦功能，類似刮刮樂效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12