退拽图片

废话不多说,成功者找方法,失败者找借口。

才刚学两天,有什么批评的话直接上,

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<style>
#hm {
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
}
</style>
</head>

<body>
<img src="img/1.jpg" id="hm" />
</body>
<script>
var mm = document.getElementById("hm");
// 获取拖拽的对象
//mm.onclick = function(e) {
// onclick 在单击(单击、松手)的时候
mm.onmousedown = function(e) {
// onmousedown 在鼠标按下的时候
// 点击物体
e.preventDefault();
// 关闭流浪器的默认拖拽
var xx = e.offsetX;
var yy = e.offsetY;
// 鼠标在物体中点击的位置
document.onmousemove = function(e) {
// 开始跟着鼠标走
var x = e.clientX - xx;
var y = e.clientY - yy;
// 鼠标位置
mm.style.left = x + "px";
mm.style.top = y + "px";
// 获取图片地址
document.onmouseup = function() {
// 停止移动
document.onmousemove = null;
// 不让图片跟着鼠标位置
}
}
}
</script>

</html>

posted @ 2017-02-22 16:44  xiaohaimian'sBlog  阅读(292)  评论(0编辑  收藏  举报