本文介绍了一个实用的网页布局技巧——通过简单的HTML和JavaScript实现div元素的拖拽功能。该方法适用于多种浏览器，并提供了完整的代码示例。
近来还是比较流行这种应用，而且论坛的人问得也多，每次去查很麻烦，就转在这里，方便查找。原文地址在下面。
可能是我转载的那个转载的排版存在问题，不能直接运行。我进行了修改。现在的代码可以直接运行了。
<html>
<head>
<title>拖动div</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<mce:style><!--
body {
margin: 0px;
padding: 0px;
font - size: 12px;
text - align: center;
}
body > div {
text - align: center;
margin - right: auto;
margin - left: auto;
}.content {
width: 900px;
}.content.left {
float: left;
width: 20 % ;
/*border:1px solid
#FF0000;*/
margin: 3px;
}.content.center {
float: left;
/*border:1px solid
#FF0000;*/
margin: 3px;
width: 57 %
}.content.right {
float: right;
width: 20 % ;
/*border:1px solid #FF0000;*/
margin: 3px
}.mo {
height: auto;
border: 1px solid#CCC;
margin: 3px;
background: #FFF
}.mo h1 {
background: #ECF9FF;
height: 18px;
padding: 3px;
cursor: move;
}.mo.nr {
height: 80px;
border: 1px solid#F3F3F3;
margin: 2px
}
h1 {
margin: 0px;
padding: 0px;
text - align: left;
font - size: 12px
}
--></mce:style><style mce_bogus="1"> body {
margin: 0px;
padding: 0px;
font - size: 12px;
text - align: center;
}
body > div {
text - align: center;
margin - right: auto;
margin - left: auto;
}.content {
width: 900px;
}.content.left {
float: left;
width: 20 % ;
/*border:1px solid
#FF0000;*/
margin: 3px;
}.content.center {
float: left;
/*border:1px solid
#FF0000;*/
margin: 3px;
width: 57 %
}.content.right {
float: right;
width: 20 % ;
/*border:1px solid #FF0000;*/
margin: 3px
}.mo {
height: auto;
border: 1px solid#CCC;
margin: 3px;
background: #FFF
}.mo h1 {
background: #ECF9FF;
height: 18px;
padding: 3px;
cursor: move;
}.mo.nr {
height: 80px;
border: 1px solid#F3F3F3;
margin: 2px
}
h1 {
margin: 0px;
padding: 0px;
text - align: left;
font - size: 12px
}</style>
<mce:script type="text/javascript"><!--
var dragobj = {}
window.onerror = function() {
return false
}
//判断浏览器
function on_ini() {
String.prototype.inc = function(s) {
return this.indexOf(s) > -1 ? true: false
}
var agent = navigator.userAgent //取得浏览器信息
window.isOpr = agent.inc("Opera");
window.isIE = agent.inc("IE") && !isOpr;
window.isMoz= agent.inc("Mozilla") && !isOpr && !isIE;
if (isMoz) {
Event.prototype.__defineGetter__("x",
function() {
return this.clientX + 2
})
Event.prototype.__defineGetter__("y",
function() {
return this.clientY + 2
})
}
basic_ini()
}
function basic_ini() {
window.$ = function(obj) {
return typeof(obj) == "string" ? document.getElementById(obj) : obj
}
window.oDel = function(obj) {
if ($(obj) != null) {
$(obj).parentNode.removeChild($(obj))
}
}
}
window.onload = function() {
on_ini();
var o = document.getElementsByTagName("h1");
for (var i = 0; i < o.length; i++){
o[i].onmousedown = function(e) {
if (dragobj.o != null) return false;
e = e || event;
dragobj.o = this.parentNode //上一层节点h1的div
dragobj.xy = getxy(dragobj.o);
dragobj.xx = new Array((e.x - dragobj.xy[1]), (e.y- dragobj.xy[0]));
dragobj.o.style.width = dragobj.xy[2] + "px" //div的宽
dragobj.o.style.height = dragobj.xy[3] + "px" //div的高
dragobj.o.style.left = (e.x - dragobj.xx[0]) + "px" //点击时移动距左边的位置
dragobj.o.style.top = (e.y - dragobj.xx[1]) + "px" //点击时移动距顶部的位置
dragobj.o.style.position = "absolute";
dragobj.o.style.filter = 'alpha(opacity = 60)'; //拖动透明效果(IE)
dragobj.o.style.opacity = '0.6' //拖动透明效果(firefox)
var om = document.createElement("div")
dragobj.otemp = om
om.style.width = dragobj.xy[2] + "px"
om.style.height = dragobj.xy[3] + "px"
om.style.border = "1px dashed black"; //显示虚线边框
dragobj.o.parentNode.insertBefore(om, dragobj.o)
return false
}
}
}
document.onselectstart = function() {
return false
}
window.onfocus = function() {
document.onmouseup()
}
window.onblur = function() {
document.onmouseup()
}
document.onmouseup = function() {
if (dragobj.o != null) {
dragobj.o.style.width = "auto";
dragobj.o.style.height = "auto";
dragobj.otemp.parentNode.insertBefore(dragobj.o, dragobj.otemp);
dragobj.o.style.position = "";
oDel(dragobj.otemp);
dragobj={};
}
}
document.onmousemove=function(e)
{
e=e||event
if(dragobj.o!=null){
dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"
dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"
createtmpl(e)
}
}
function getxy(e)
{
var a=new Array()
var t=e.offsetTop;//e距离上方或上层控件的位置，整型
var l=e.offsetLeft;//e距离左方或上层控件的位置，整型
var w=e.offsetWidth;
var h=e.offsetHeight;
while(e=e.offsetParent){//offsetParent是body因为没有相对或绝对定位
t+=e.offsetTop;
l+=e.offsetLeft;
}
a[0]=t;a[1]=l;a[2]=w;a[3]=h
return a;
}
function inner(o,e)
{
var a=getxy(o)
if(e.x>a[1]&&e.x<(a[1]+a[2])&&e.y>a[0]&&e.y<(a[0]+a[3])){
if(e.y<(a[0]+a[3]/2)) return 1;
else return 2;
}else return 0;
}
function createtmpl(e)
{
var k = document.getElementsByTagName("h1")
for(var i=0;i<k.length;i++){
if($("m"+i)==dragobj.o) continue
var b=inner($("m"+i),e)
if(b==0) continue
dragobj.otemp.style.width=$("m"+i).offsetWidth
//移动 1：下 2：上
if(b==1){
$("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i))
}else{
if($("m"+i).nextSibling==null){
$("m"+i).parentNode.appendChild(dragobj.otemp)
}else{
$("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i).nextSibling)
}
}
return
}
for(var j=0;j<3;j++){
if($("dom"+j).innerHTML.inc("div")||$("dom"+j).innerHTML.inc("DIV")) continue;
var op=getxy($("dom"+j))
if(e.x>(op[1]+10)&&e.x<(op[1]+op[2]-10)){
$("dom"+j).appendChild(dragobj.otemp)
dragobj.otemp.style.width=(op[2]-10)+"px"
}
}
}
// --></mce:script>
</head>
<body>
<div class=content>
<div class=left id=dom0>
<div class=mo id=m0><h1>dom0</h1><div class="nr"></div></div>
<div class=mo id=m1><h1>dom1</h1><div class="nr"></div></div>
<div class=mo id=m2><h1>dom2</h1><div class="nr"></div></div>
<div class=mo id=m3><h1>dom3</h1><div class="nr"></div></div>
</div>
<div class=center id=dom1>
<div class=mo id=m4><h1>dom4</h1><div class="nr"></div></div>
<div class=mo id=m5><h1>dom5</h1><div class="nr"></div></div>
<div class=mo id=m6><h1>dom6</h1><div class="nr"></div></div>
<div class=mo id=m7><h1>dom7</h1><div class="nr"></div></div>
</div>
<div class=right id=dom2>
<div class=mo id=m8><h1>dom8</h1><div class="nr"></div></div>
<div class=mo id=m9><h1>dom9</h1><div class="nr"></div></div>
<div class=mo id=m10><h1>dom10</h1><div class="nr"></div></div>
<div class=mo id=m11><h1>dom11</h1><div class="nr"></div></div>
<div class=mo id=m12><h1>dom12</h1><div class="nr"></div></div>
</div>
</div>
</body>
</html>
原文地址:http://www.corange.cn/archives/2008/12/2757.html
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
