好玩的原生js的简单拖拽

这个拖拽的图片不是唯一的，拿到代码自己添加一张照片就可以啦

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding:0;
}
body{
height: 100%;
width: 100%;
background: #0086B3;
}
#box{
width: 100px;
height: 100px;
border-radius: 100px;
background:linear-gradient(red,yellow);
position: absolute;/*定位,为下面拖拽提供css样式,必须有的*/
text-align: center;
line-height: 100px;
font-size: 20px;
font-weight: bold;
color: red;
}
img{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="box"><img src="aa.gif" alt=""></div>
</body>
</html>
<script>
var box = document.getElementById("box");//获取id
box.onmousedown = function(e){//鼠标按下事件
var e = e || event;//事件对象兼容
e.preventDefault ? e.preventDefault():e.returnValue = flase;
//阻止字体被选中
var disx = e.offsetX || e.layerX;//计算相对盒子水平偏移量
var disy = e.offsetY || e.offsetY;//计算相对盒子垂直偏移量
document.onmousemove = function(e){//鼠标移动事件
var e = e || event;
//边界处理
var wx = window.innerWidth - 100;//水平移动范围限制
var wy = window.innerHeight -100;//垂直移动范围限制
var x = e.pageX - disx ;//计算鼠标水平偏移量
var y = e.pageY -disy ;//计算鼠标垂直偏移量
if(x < 0){//左边界限制
x = 0;
}else if(x > wx){//右边界限制
x = wx;
}
if(y < 0){//上边界限制
y = 0;
}else if(y > wy){//下边界限制
y = wy;
}
box.style.left = x + "px";//盒子css样式赋值
box.style.top = y + "px";
box.style.transform = "scale(2)";//放大两倍
// box.style.transform = "rotate(180deg)";
// box.style.cssText = "transform : scale(2) rotate(360deg);"
box.style.transition= "1s";//时间过渡1s
}
box.onmouseup = function(){//鼠标抬起事件
document.onmousemove = null;//删除鼠标移动事件
box.style.transform = "scale(1)";//盒子大小还原
/* box.style.transition= "none"; */

}
}
</script>

巴特西

好玩的原生js的简单拖拽

最新文章

热门文章