标签：
拖拽效果
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拖拽效果</title> <link rel="stylesheet" type="text/css" href="拖拽效果.css"> </head> <body> <div id="box"> <h1 id="heading">点击拖拽</h1> </div> <script src="拖拽效果.js"></script> </body> </html>
CSS
#box { width:300px; height:300px; background-color:red; padding:10px; border:5px solid green; text-align: center; position:absolute; top:50px; left:50px; } #heading { background-color: blue; }
JavaScript
//页面加载完毕之后调用drag函数 window.onload = drag; //封装drag函数 function drag() { //获取heading元素 var heading = document.getElementById("heading"); //鼠标在heading元素区域按下时执行fnDown函数 heading.onmousedown = fnDown; //鼠标在页面中松开时取消拖拽效果 document.onmouseup = function() { document.onmousemove = null; }; }; //封装fnDown函数 function fnDown(event) { event = event || window.event; var box = document.getElementById("box"), heading = document.getElementById("heading"), //取得鼠标点击的那个点与box左上角的距离 disY = event.clientY - box.offsetTop, disX = event.clientX - box.offsetLeft; //鼠标在页面中移动时执行匿名函数 document.onmousemove = function(event) { event = event || window.event; //核心思想是：鼠标在哪儿，box跟到哪儿 //计算box距离页面左上角的距离 var t = event.clientY - disY, l = event.clientX - disX, window_width = document.documentElement.clientWidth || document.body.clientWidth, window_height = document.documentElement.clientHeight || document.body.clientHeight, max_t = window_height - box.offsetHeight, max_l = window_width - box.offsetWidth; //控制box移动的最大最小距离 if(t < 0) { t = 0; } else if(t > max_t) { t = max_t; }; if(l < 0) { l = 0; } else if(l > max_l) { l = max_l; }; //box的位置跟随鼠标光标 box.style.top = t + "px"; box.style.left = l + "px"; }; };
标签：
原文地址：http://www.cnblogs.com/cc156676/p/5744405.html
