首页 > 其他 > 详细

拖放的实现步骤

时间:2016-05-22 00:31:35      阅读:233      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!