码迷,mamicode.com
首页 > 其他好文 > 详细

拖放的实现步骤

时间:2016-05-22 00:31:58      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:

<style type="text/css">
div{
width: 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>

 

拖放的实现步骤

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!