核心代码
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8" /> <title> 鼠标拖动和拖拽的鼠标指针特效 </title> <estilo> #box {width: 100px; altura: 100px; fundo:#966; posição: absoluto; esquerda: 100px; topo: 100px; cursor: pointer;} </estilo> </head> <body> <div = "caixa"> </div> <script> var doc =; {width: Math.max (document.documentElement.clientWidth, document.documentElement.scrollwidth), altura: math.max (document.documentElement.clientHeight, document.documentElement.scrollheight)};} comparaNum (x, minnum, maxnum) {snumen) {swostern; caso x> maxnum: x = maxnum; quebra; padrão: x; } retornar 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-100; this.startl = parseint (this.style.left); this.startt = parseint (this.style.top); //alert(e.clientX) this.startx = e.clientX; this.starty = e.clienty; // alerta (maxl+':'+maxt+':'+l+':'+t) doc.onMouSeMove = function (e) {posxy (e, 0,0, maxl, maxt); }; doc.onMouseUp = function () {doc.onMouseMove = null; doc.onMouseUp = null; }; retornar false;} função posxy (e, minl, hortelã, 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, hortelã, maxt)+'px'} </sCript> </body> </html>[Ctrl+A 全选 注: 如需引入外部 JS 需刷新才能执行]