運用js實現(xiàn)圖層拖拽的功能
更新時間：2019年05月24日 14:12:08 作者：舊城tk
js拖拽是常見的網(wǎng)頁效果,本文將從零開始實現(xiàn)一個簡單的js插件,下面和小編來一起學習一下吧
1.需求分析：設計一個元素，可以跟隨鼠標的移動，元素也進行移動，并且能夠在鼠標按上與按下元素的時候，元素同樣可以進行改變樣式顏色。
2. 設計思路：先是需要獲取元素，給元素綁定鼠標按下的事件，在綁定的事件中，兼容event事件，獲取鼠標的坐標和元素的坐標，通過鼠標的坐標減去元素的坐標就可以得到鼠標在元素中的坐標。在綁定事件中，寫上一個元素的移動事件，獲取元素的移動坐標。最后，在鼠標按上的事件函數(shù)中，可以調用元素的移動事件就可以了。
<!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;
// 獲取鼠標的坐標
var x = env.clientX;
var y = env.clientY;
// 獲取元素的坐標
var left = box.offsetLeft;
var top = box.offsetTop;
// 獲取鼠標在元素中的坐標
var x_left = x - left;
var y_top = y -top;
// 鼠標點擊后改變顏色
box.style.background = "red";
// 元素的移動事件函數(shù)
box.onmousemove = function(env){
// 兼容event事件
var env = env || window.event;
// 獲取元素移動時的鼠標的坐標
var x = env.clientX;
var y = env.clientY;
// 元素的移動坐標
box.style.left = (x - x_left)+"px";
box.style.top = (y - y_top)+"px";
}
};
// 鼠標彈出的事件函數(shù)
box.onmouseup = function(){
box.style.background = "skyblue";
// 在鼠標彈出后再次調用元素的鼠標移動事件
box.onmousemove = function(){};
};
</script>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文將詳細介紹JavaScript中“+”的一些錯誤應用，需要的朋友可以參考下2012-12-12
這篇文章主要介紹了JavaScript中實現(xiàn)依賴注入的思路分享,本文給出的解決方案包括獲取func的參數(shù)列表、根據(jù)參數(shù)列表尋找依賴、傳遞依賴項參數(shù)并實例化等3個步驟,需要的朋友可以參考下2015-01-01
詳解JavaScript基于面向對象之創(chuàng)建對象（1）
這篇文章主要介紹了JavaScript基于面向對象之創(chuàng)建對象，對創(chuàng)建對象進行了詳細描述，感興趣的小伙伴們可以參考一下2015-12-12
年底了各個公司都有抽獎活動，我也寫了一個超級簡單的代碼來實現(xiàn)抽獎效果，這里沒有華麗的Css3效果，但卻有短小精悍的js代碼。2015-01-01
JS可以實現(xiàn)很多java代碼不易完成的功能,下面這篇文章主要給大家介紹了關于如何通過一篇文章帶你學會JavaScript計時事件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
本文介紹了使用javascript計算星座和屬相的示例，這個可以用在用戶注冊的時候顯示出來，大家參考使用吧2014-01-01
JavaScript可以做很多出色的事情，本篇文章給大家整理50+個實用工具函數(shù)，可以幫助你提高工作效率并可以幫助調試代碼，需要的朋友們下面隨著小編來一起學習學習吧2021-06-06
字體可以調節(jié)大小，極大了滿足了用戶體驗度，接下來通過本文給大家介紹JavaScript實現(xiàn)點擊按鈕字體放大、縮小實例代碼，需要的朋友參考下吧2016-02-02
由于在沒有規(guī)劃好的情況下寫的這個代碼，寫的比較粗糙，也沒有添加注釋。 JavaScript代碼和HTML完全分離；可以隨意添加多個子div標簽，自動擴展2009-07-07
這篇文章主要為大家詳細介紹了cocos2dx+lua實現(xiàn)橡皮擦功能，類似刮刮樂效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12