JavaScript拖拽效果代码

1、新建html文档。

2、书写hmtl代码。<div id="aaa"></div>

3、书写css代码。

<style>

*{margin:0;padding:0;list-style: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.onmousedown = 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、查看效果。