DIV+CSS+JS实现的可以随意拖动的⽹页布局复制下⾯的代码，⽣成html⽂件后，打开即可以看到效果
随意拖动⼀个dom到⼀个红框范围内，测试⼀下很好⽤！
<html>
<head>
<title>DIV+CSS+JS实现的可以随意拖动的⽹页布局⼁芯晴⽹页特效⼁CsrCode.Cn</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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;
}
.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}
网页html下载</style>
<script>
var dragobj={}
//on_ini()是判断浏览器的
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()
}
//basic_ini()⽅法，如果$（string)则取值为ElementById(obj)，
function basic_ini(){
//获得节点
window.$=function(obj){return typeof(obj)=="string"?ElementById(obj):obj} //删除节点
window.oDel=function(obj){if($(obj)!=null){$(obj).veChild($(obj))}}
}
on_ini()
var ElementsByTagName("h1")
if(dragobj.o!=null)
return false
e=e||event
dragobj.o=this.parentNode
<=getxy(dragobj.o)
<=new Array(([1]),([0])) style.[2]+"px"
var ateElement("div")
om.style.[2]+"px"
om.style.[3]+"px"
return false
}
}
}
//⿏标弹开时
if(dragobj.o!=null){
p)
//⿏标点下移动时
e=e||event
if(dragobj.o!=null){
}
}
//getxy⽅法介绍
function getxy(e){
var a=new Array()
var t=e.offsetTop;
var l=e.offsetLeft;
var w=e.offsetWidth;
var h=e.offsetHeight;
while(e=e.offsetParent){
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;
function createtmpl(e){
for(var i=0;i<12;i++){
if($("m"+i)==dragobj.o)
continue
var b=inner($("m"+i),e)
if(b==0)
continue
if(b==1){
$("m"+i).parentNode.p,$("m"+i))
}else{
if($("m"+i).nextSibling==null){
$("m"+i).parentNode.p)
}else{
$("m"+i).parentNode.p,$("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).p)
}
}
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。