首頁 > 開發者 > JavaScript
本文執行個體講述了javascript實現簡單的滑鼠拖動效果。分享給大家供大家參考。具體分析如下：
用滑鼠拖動一個元素，放到網頁的任意一個位置上，這是很常見的，例如很多部落格模板版塊位置可以自己拖動到相應位置。
下面先寫一個簡單的可以實現滑鼠拖動的效果。
當滑鼠按下的時候，記錄滑鼠當前位置和元素左邊距離的差值。
當滑鼠移動的時候，給元素的位置賦值，就是滑鼠的位置，減去剛才的差值。
當滑鼠放開的時候，給滑鼠移動和滑鼠放開賦值null，讓它們不要再有任何動作。
要點一：
disx = oevent.clientX - box.offsetLeft;
要確定拖動的時候滑鼠點在元素的位置，就是滑鼠位置減去元素的左邊距離。
要點二：
box.style.left = oevent.clientX - disx + "px";
拖動時元素的位置，滑鼠的當前位置減去前面剛計算的值。
好了，上代碼：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>無標題文檔</title><style>body{margin:0; padding:0; height:1500px;}#box{width:100px; height:100px; background:#06c; position:absolute;}</style><script>window.onload = function(){ var box = document.getElementById("box"); var disx =0; var disy = 0; box.onmousedown = function(evt){ var oevent = evt || window.event; disx = oevent.clientX - box.offsetLeft; disy = oevent.clientY - box.offsetTop; document.onmousemove = function(evt){ var oevent = evt || window.event; box.style.left = oevent.clientX - disx + "px"; box.style.top = oevent.clientY - disy + "px"; } document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; } return false; }}</script></head><body><h1>滑鼠拖動</h1><div id="box"></div></body></html>
再改進一下，上面的滑鼠拖動沒有限制範圍，有時會拖動視窗外面看不見了。下面就限制下範圍
要點一：如下，如果元素的左邊位置小於0時，給它賦值為0，如果大於可視窗大小減去元素本身的寬度的，給它賦值為 可視窗大小減元素本身寬度的差值。
var boxl = oevent.clientX - disx;if(boxl < 0){ boxl =0; }else if(boxl > vieww - box.offsetWidth){ boxl = vieww - box.offsetWidth; }<!DOCTYPE html><html><head><meta charset="utf-8" /><title>無標題文檔</title><style>body{margin:0; padding:0;}#box{width:100px;height:100px;background:#06c;position:absolute;}</style><script>window.onload = function(){ var box = document.getElementById("box"); var disx =0; var disy = 0; box.onmousedown = function(evt){ var oevent = evt || window.event; disx = oevent.clientX - box.offsetLeft; disy = oevent.clientY - box.offsetTop; document.onmousemove = function(evt){ var oevent = evt || window.event; var boxl = oevent.clientX - disx; var boxt = oevent.clientY - disy var vieww = document.documentElement.clientWidth || document.body.clientWidth; var viewh = document.documentElement.clientHeight || document.body.clientHeight; if(boxl < 0){ boxl =0; }else if(boxl > vieww - box.offsetWidth){ boxl = vieww - box.offsetWidth; } if(boxt < 0){ boxt =0; }else if(boxt > viewh - box.offsetHeight){ boxt = viewh- box.offsetHeight; } box.style.left = boxl + "px"; box.style.top = boxt + "px"; } document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; } return false; }}</script></head><body><h1>滑鼠拖動</h1><div id="box"></div></body></html>
希望本文所述對大家的javascript程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
