<!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.onmousedown=function (e){
e=e||event;
x=e.clientX,y=e.clientY,_left=win.offsetLeft,_top=win.offsetTop;
this.ondragstart=function(){return false};
document.onmousemove=e_move;
document.onmouseup=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.onmousemove=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>
或者另外一种方法:
<!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.onmousemove=small_move;
document.onmouseup=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.onmousemove="";
document.onmouseup="";
}
</script>
</head>
<body>
<div id= "big">
<div id="small" onmousedown="small_down(event)"></div>
</div>
</body>
</html>
分享到:
相关推荐
div在页面可以随便拖动
拖动div,然后在另一个div显示被拖进div的id.
div 拖动 div 拖动 div 拖动 div 拖动 div 拖动 div 拖动
透明div可以拖动 Jquery特效,CSS+DIV透明div可以拖动 Jquery特效,CSS+DIV透明div可以拖动 Jquery特效,CSS+DIV
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线,外部资源仅需要jquery。有以下功能: 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点...
可拖动div边框改变大小的方法,jquery拖拽改变div大小效果,。。。。。。。。。。。。。。。。。。。。。。。。。
一个很好用的javaScript写的小程序,可实现div的拖动、变形。解压后直接拷到程序中就可运行
JQ JS javascript layui UI组件 元素 div 拖动插件JQ JS javascript layui UI组件 元素 div 拖动插件
js拖动div并拖动DIV的大小,js拖动div并拖动DIV的大小
DIV自定义拖拽布局,可随意拖动各栏目,
DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动
超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 ...
vue 实现页面div盒子拖拽排序功能前言:目前市面上有很多实现拖拽排序功能的插件和方法,本节不过多累述,只讲一种:css3的transition-group方法 效果图: 1. DOM中使用: ...
在页面上实现自由拖动DIV的小程序;鼠标点击后选中DIV并开始拖动,拖动过程中透明显示,移动时根据鼠标位置计算控件左上角的绝对位置,松开鼠标后停止移动并恢复成不透明
拖拽并同时拖拽改变div大小暂无兼容性问题
弹出的div层可以随意拖拽 不错js
jquery拖拽排序插件div自由拖动排序代码
div拖动
界面好看 效果绚丽 拿来即用 js实现DIV自定义拖拽并且保存的例子 非常适合web2.0开发使用 如果配合jquery效果更好 且能保存数据至数据库、cookie、xml等
C#实现DIV拖拽!简单实用,和大家一块分享!自己写的,呵呵!