js 简单拖动

最新推荐文章于 2024-03-20 09:35:04 发布

lyon-yao

最新推荐文章于 2024-03-20 09:35:04 发布

阅读量299

点赞数

分类专栏： Cache JavaScript HTML

本文链接：https://blog.csdn.net/qq378741744/article/details/8940983

版权

HTML 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

Cache

1 篇文章 0 订阅

订阅专栏

<!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 %>" οnmοusedοwn="startDrag(this)" οnmοuseup="stopDrag(this)" οnmοusemοve="drag(this)" style="width: 100%;height: 100%"/></div>
</div>
</body>
</html>

lyon-yao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 简单拖动

"> 。。。。 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;
复制链接

扫一扫