对书中案例的理解和注释。使用draggable属性和方法来实现元素拖放。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin:0;padding: 0;}
body{position: relative;}
img{position: absolute;}
</style>
<script>
window.onload=function(){
var oImg=document.getElementsByTagName("img")[0];
// console.log("img坐标: " + oImg.x + " " + oImg.y);
var offsetX,offsetY;
//元素每次拖动开始时,记录它的坐标(偏移量)
oImg.ondragstart=function(e){
offsetX = e.offsetX;
offsetY = e.offsetY;
// e.offsetX、e.offsetY分别表示鼠标相对于触发事件的对象的X坐标、Y坐标
// console.log("offset: " + offsetX + " " + offsetY);
};
//元素拖动过程中,重新设置它的坐标(偏移量)
oImg.ondrag=function(e){
if(e.pageX==0 && e.pageY==0){
return;
}
// e.pageX、e.pageY分别表示鼠标相对于当前窗口的X坐标、Y坐标
// console.log("page: " + e.pageX + " " + e.pageY);
oImg.style.left = (e.pageX - offsetX) + "px";
oImg.style.top = (e.pageY - offsetY) + "px";
}
}
</script>
</head>
<body>
<img src="img.png" alt="" draggable="true">
</body>
</html>