核心代码 ：
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8" /> <title> 鼠标拖动和拖拽的鼠标指针特效 </iteme> <tyle> #box {width: 100px; tinggi: 100px; latar belakang:#966; Posisi: absolute; kiri: 100px; atas: 100px; kursor: pointer;} </tyle> </head> <det body> <v id = "box"> </div> <cript> function = document = document; {width: math.max (document.documentelement.clientwidth, document.documentelement.scrollwidth), height: math.max (document.documentelement.clientheight, document.documentelement.scrollheight) {} function comparEnum (x, minnum, maxn) {{{{{{{{{{{x, x, Minnum, maxn) {{{x, x, Minnum, Maxn) x <Minnum: x = Minnum; break; case x> maxnum: x = maxnum; break; Default: 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 (). Tinggi-100; 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;} fungsi 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 = comparenum (x, minl, maxl)+'px' box.style.top = Comparenum (y, mint, maxt)+'px'} </script> </body> </html>[Ctrl+a 全选 注: 如需引入外部 js 需刷新才能执行]