1、新建html文档。
2、书写hmtl代码。<div id="aaa"></div>
3、书写css代码。<style> *{margin:0;padding:0;list-sty造婷用痃le:none;} #aaa{position:absolute;left:30%;top:30%;width:100px;height:100px;background-color:#2bb7e4;cursor:move;} </style>
4、书写并添加js代码。<script> var oBox = document.getElementById('aaa'); oBox.o荏鱿胫协nmousedown = function(e){ var oEvent =e || window.event, disL = oEvent.clientX - oBox.offsetLeft, disT = oEvent.clientY - oBox.offsetTop, maxL = document.documentElement.clientWidth - oBox.offsetWidth, maxT = document.documentElement.clientHeight - oBox.offsetHeight; document.onmousemove = function(e){ var oEvent = e || window.event, disX = oEvent.clientX - disL, disY = oEvent.clientY - disT; if(disX <= 0){ disX = 0} if(disY <= 0){ disY = 0} if(disX >= maxL){ disX = maxL} if(disY >= maxT){ disY = maxT} oBox.style.left = disX + 'px'; oBox.style.top = disY + 'px'; } } document.onmouseup = function(){ document.onmousemove = null; } </script>
5、代码整体结构。
6、查看效果。
