南强小屋 Design By 杰米
效果图：(红色方块可任意拖动)
代码如下：
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:url("img/2345_image_file_copy_1.jpg");
}
#d1{
width:100px;
height:100px;
background:red;
margin-left:300px;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
<script>
window.onload=function(){
var d1=document.getElementById("d1");
d1.onmousedown=function(e){
var mouseX=e.clientX;
var mouseY=e.clientY;//计算xy
var pianyiX=mouseX-d1.offsetLeft;
var pianyiY=mouseY-d1.offsetTop;
document.onmousemove=function(e){
var newX=e.clientX-pianyiX;
var newY=e.clientY-pianyiY;
d1.style.marginLeft=newX+"px";
d1.style.marginTop=newY+"px";
}
};
document.onmouseup = function(e){
document.onmousemove = null ;
};
}
/*
结果，上面的onmousemove要写在document上,我写在div上导致错误
*/
</script>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
标签：
js,拖拽,js,拖拽效果
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无js实现拖拽功能的评论...