如何让那个一个div可以拖动

最新推荐文章于 2024-04-09 00:58:19 发布

diaoer5202401117

最新推荐文章于 2024-04-09 00:58:19 发布

阅读量851

点赞数

分类专栏： js 文章标签： html

本文链接：https://blog.csdn.net/diaoer5202401117/article/details/84730726

版权

js 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{background:#ccc;}
.block{position:absolute;left:0;top:100px;border:1px solid #000;background:red;width:30px;height:30px;}
#google{width:300px;height:300px;border:2px inset #fff;background:#fff;position:relative;overflow:hidden;}
</style>
</head>
<body>
<div id="google"><div id="main" class="block"></div></div>
</body>
<script type="text/javascript">
//<![CDATA[
function Drag(title,body,range){
var w=window,win=body||title,x,y,_left,_top,range=range||function(x){return x};
title.style.cursor='move';
title.οnmοusedοwn=function (e){
e=e||event;
x=e.clientX,y=e.clientY,_left=win.offsetLeft,_top=win.offsetTop;
this.οndragstart=function(){return false};
document.οnmοusemοve=e_move;
document.οnmοuseup=undrag
};
function e_move(e){
e=e||event;
var cl=range(_left+e.clientX-x,'x'),ct=range(_top+e.clientY-y,'y');
win.style.left=cl+'px';
win.style.top=ct+'px';
w.getSelection?w.getSelection().removeAllRanges():
document.selection.empty();
};
function undrag(){this.οnmοusemοve=null};
};

function $(x){return typeof x=='string'?document.getElementById(x):x};
var google=$("google"),main=$('main');
var max={
x:google.offsetWidth-main.offsetWidth-4,
y:google.offsetHeight-main.offsetHeight-4
}
Drag(
main,
false,
function(x,type){return Math.max(0,Math.min(max[type],x))}
)
//]]>
</script>
</html>

[/code]

或者另外一种方法：

[code]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#big{ border:1px solid #FF3300; width:300px; height:300px; position:relative;}
#small{ background:#99CC00; width:50px; height:50px; position:absolute; cursor: move;}
</style>
<script language="javascript">
function small_down(e){
var obig=document.getElementById("big");
var osmall=document.getElementById("small");
var e=e||window.event;

document.οnmοusemοve=small_move;
document.οnmοuseup=small_up;

osmall.startX=e.clientX-osmall.offsetLeft;
osmall.startY=e.clientY-osmall.offsetTop;
}
function small_move(e){
var obig=document.getElementById("big");
var osmall=document.getElementById("small");
var e=e||window.event;

osmall.style.left=e.clientX-osmall.startX+"px";
osmall.style.top=e.clientY-osmall.startY+"px";

if(e.clientX-osmall.startX<=0){ osmall.style.left=0+"px";}
if(e.clientY-osmall.startY<=0){ osmall.style.top=0+"px";}
if(e.clientX-osmall.startX>=250){ osmall.style.left=250+"px";}
if(e.clientY-osmall.startY>=250){ osmall.style.top=250+"px";}
}
function small_up(){
document.οnmοusemοve="";
document.οnmοuseup="";
}
</script>
</head>
<body>
<div id= "big">
<div id="small" οnmοusedοwn="small_down(event)"></div>
</div>
</body>
</html>

[/code]