<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽的封裝</title>
<style>
#div1{
width:100px;
height:100px;
background:red;
position:absolute;
}
img{
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("div1");
var oImg = document.getElementById("img1");
drag( oDiv);
drag( oImg);
//封裝拖拽函數drag；
function drag(obj){
obj .onmousedown = function(ev){
var ev = ev||event;
var disX = ev.clientX-this.offsetLeft;
var disY = ev.clientY-this.offsetTop;
if(obj.setCapture){
obj.setCapture();
}
document.οnmοusemοve= function(ev){
var ev = ev||event;
obj.style.left= ev.clientX-disX+"px";
obj.style.top= ev.clientY-disY+"px";
}
document.onmouseup = function(){
document.onmousemove = null;
if(obj.releaseCapture){
obj.releaseCapture();
}
}
return false;//取消事件默認行爲
}
}
}
</script>
</head>
<body>
fdsgdfdsfsdf
<div id="div1"></div>
<img id="img1" src="../img/cake2.jpg">
</body>
</html>
