拖放的实现步骤

<style type="text/css">
div{
100px;
height: 100px;
background: green;
border-radius: 50px;
}
</style>

<body>
<div id="div1" style="/position: absolute;top:200px;left: 200px;"></div>
</body>
<script type="text/javascript">
var div1=document.getElementById("div1");
//鼠标按下
div1.onmousedown=function (e){
var ev=e||window.event;
var cliX=ev.clientX-parseInt(div1.style.left);//让鼠标在div之上
var cliY=ev.clientY-parseInt(div1.style.top);
//鼠标移动
div1.onmousemove=function(e){
var ev=e||window.event;
div1.style.left=ev.clientX-cliX+"px";//鼠标移动,跟着动
div1.style.top=ev.clientY-cliY+"px";
}
//鼠标弹起
div1.onmouseup=function(){
div1.onmousemove=null;
}
//鼠标移开
div1.onmouseout= function () {
div1.onmousemove=null;
}
}


</script>

原文地址:https://www.cnblogs.com/1039595699TY/p/5515917.html