用鼠标拖动一个元素，放到网页的任意一个位置上，这是很常见的，例如很多博客模板版块位置可以自己拖动到相应位置。
下面先写一个简单的可以实现鼠标拖动的效果。
当鼠标按下的时候，记录鼠标当前位置和元素左边距离的差值。
当鼠标移动的时候，给元素的位置赋值，就是鼠标的位置，减去刚才的差值。
当鼠标放开的时候，给鼠标移动和鼠标放开赋值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></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></div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章: