<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>简单的拖拽</title> ???<link rel="stylesheet" href="../toolkit/reset.min.css"> ???<style> ???????#box{ ???????????height: 200px; ???????????width: 200px; ???????????background-color: #e277ff; ???????????position: absolute; ???????????cursor: move; ???????} ???</style></head><body><div id="box"></div><script> ???var box=document.getElementById("box"); ???function drag(e) { ???????e=e||window.event; ???????var _this=this; ???????var mouseX=e.clientX, ???????????????mouseY=e.clientY, ???????????????boxL=this.offsetLeft, ???????????????boxT=this.offsetTop; ???????document.onmousemove=function (e) { ???????????e=e||window.event; ???????????var curMouseX=e.clientX, ???????????????????curMouseY=e.clientY, ???????????????????curBoxL=curMouseX-mouseX+boxL, ???????????????????curBoxT=curMouseY-mouseY+boxT; ???????????var minW=0,maxW=((document.documentElement.clientWidth||document.body.clientWidth)-_this.offsetWidth); ???????????var minH=0,maxH=((document.documentElement.clientHeight||document.body.clientHeight)-_this.offsetHeight); ???????????if(curBoxL<=minW){ ???????????????curBoxL=minW; ???????????}else if(curBoxL>=maxW){ ???????????????curBoxL=maxW ???????????} ???????????if(curBoxT<=minH){ ???????????????curBoxT=minH; ???????????}else if(curBoxT>=maxH){ ???????????????curBoxT=maxH; ???????????} ???????????_this.style.left=curBoxL+"px"; ???????????_this.style.top=curBoxT+"px"; ???????}; ???????document.onmouseup=function () { ???????????document.onmousemove=null; ???????} ???} ???box.onmousedown=drag;</script></body></html>JS实现拖拽小案例
原文地址：http://www.cnblogs.com/Scar007/p/7911137.html