js 简单拖动

来源：互联网发布：sftp 命令端口号编辑：程序博客网时间：2024/05/18 12:33

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
    <base href="<%=basePath%>">

    <title>。。。。</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
var x0=0,y0=0,x1=0,y1=0;
var moveable=false;
//开始拖动;
function startDrag(obj){
if(event.button==1){
obj.setCapture();
var win = obj.parentNode;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.offsetLeft);
y1 = parseInt(win.offsetTop);
moveable = true;
}
}
//拖动;
function drag(obj){
if(moveable){
var win = obj.parentNode;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
}
}
//停止拖动;
function stopDrag(obj){
if(moveable){
obj.releaseCapture();
moveable = false;
}
}
</script>

</head>
<body style="margin: 0px;padding: 0px;">
<div style="width: 100%;height: 50px;"><img src="images/title.jpg" style="width: 100%;height: 100%"/></div>
<div style="margin:auto;width: 100%;height:600px;background-image: url(images/gradient-bg.gif);background-repeat:repeat-y;text-align:center;">
<div style="margin:auto;" ><img src="<%=url %>" onmousedown="startDrag(this)" onmouseup="stopDrag(this)" onmousemove="drag(this)" style="width: 100%;height: 100%"/></div>
</div>
</body>
</html>