核心代码 ：
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8" /> <title> </title> <style> #box {너비 : 100px; 높이 : 100px; 배경 :#966; 위치 : 왼쪽; 왼쪽; 왼쪽 : 100px; 상단 : 100px; 커서;} </style> </head> <div id = "box"> </div> <script> var doc = 문서; 기능 getviewport () {return {width : math.max (Document.DocumentElement.clientWidth, document.documentElement.scrollwidth), 높이 : Math.Max (Document.DocumentElement.ClientHeight, Document.DocumentElement.ScrollHeight)};} 함수 비교 (X, Minnum, Maxnum) {true) {Case) {COSE x <minnum : x = minnum; break; 사례 x> maxnum : x = maxnum; break; 기본값 : x; } return x; } box.style.left = '100px'box.style.top ='100px'box.onmousedown = function (e) {var e = e || window.event; var maxl = getViewport (). width-100, maxt = getViewport (). Height-10; this.startl = parseint (this.style.left); this.startt = parseint (this.style.top); //alert(e.clientx) this.startx = e.clientx; this.starty = e.clienty; // alert (maxl+':'+maxt+':'+l+':'+t) doc.onmouseMove = function (e) {posxy (e, 0,0, maxl, maxt); }; doc.onmouseup = function () {doc.onmouseMove = null; doc.onmouseup = null; }; return false;} 함수 posxy (e, minl, mint, maxl, maxt) {var e = e || window.event; var x = box.startl- (box.startx-e.clientx); var y = box.startt- (box.starty-e.clienty); box.style.left = 비교 (x, minl, maxl)+'px'box.style.top = comparenum (y, mint, maxt)+'px'} </script> </body> </html>[ctrl+a l 注 : 如需引入外部 js 需刷新才能执行]