JS拖动DIV布局
方法一： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0; -moz-user-select:none;}
ul{ margin: 100px; border: 1px solid #adff2f; list-style: none;}
li{ height: 30px; line-height: 30px; padding: 0; list-style: none;}
li:hover{ background: #bdb76b; cursor: move;}
</style>
</head>
<body>
<ul id="outer_wrap">
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
<li>第四条</li>
<li>第五条</li>
<li>第六条</li>
<li>第七条</li>
<li>第八条</li>
</ul>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
//获取鼠标位置
function getMousePos(e){
return {
x : e.pageX || e.clientX + document.body.scrollLeft,
y : e.pageY || e.clientY + document.body.scrollTop
}
}
//获取元素位置
function getElementPos(el){
return {
x : el.offsetParent ? el.offsetLeft + arguments.callee(el.offsetParent)['x'] : el.offsetLeft,
y : el.offsetParent ? el.offsetTop + arguments.callee(el.offsetParent)['y'] : el.offsetTop
}
}
//获取元素尺寸
function getElementSize(el){
return {
width : el.offsetWidth,
height : el.offsetHeight
}
}
//禁止选择
document.onselectstart = function(){
return false;
}
//判断是否有挪动
var MOVE = {};
MOVE.isMove = false; //就是创建的标杆
var div = document.createElement('div');
div.style.width = '400px';
div.style.height = '1px';
div.style.fontSize = '0';
div.style.background = 'red'; var outer_wrap = $('outer_wrap');
outer_wrap.onmousedown = function(event){
//获取列表顺序
var lis = outer_wrap.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++){
lis[i]['pos'] = getElementPos(lis[i]);
lis[i]['size'] = getElementSize(lis[i]);
}
event = event || window.event;
var t = event.target || event.srcElement;
if(t.tagName.toLowerCase() == 'li'){
var p = getMousePos(event);
var el = t.cloneNode(true);
el.style.position = 'absolute';
el.style.left = t.pos.x + 'px';
el.style.top = t.pos.y + 'px';
el.style.width = t.size.width + 'px';
el.style.height = t.size.height + 'px';
el.style.border = '1px solid #d4d4d4';
el.style.background = '#d4d4d4';
el.style.opacity = '0.7';
document.body.appendChild(el); document.onmousemove = function(event){
event = event || window.event;
var current = getMousePos(event);
el.style.left =t.pos.x + current.x - p.x + 'px';
el.style.top =t.pos.y + current.y - p.y+ 'px';
document.body.style.cursor = 'move'; //判断插入点
for(var i = 0; i < lis.length; i++){
if(current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i]['size']['width'] && current.y > lis[i]['pos']['y'] && current.y < lis[i]['pos']['y'] + lis[i]['size']['height']/2){
if(t != lis[i]){
MOVE.isMove = true;
outer_wrap.insertBefore(div,lis[i]);
} }else if(current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i]['size']['width'] && current.y > lis[i]['pos']['y'] + lis[i]['size']['height']/2 && current.y < lis[i]['pos']['y'] + lis[i]['size']['height']){
if(t != lis[i]){
MOVE.isMove = true;
outer_wrap.insertBefore(div,lis[i].nextSibling);
}
}
}
}
//移除事件
document.onmouseup = function(event){
event = event || window.event;
document.onmousemove = null;
if(MOVE.isMove){
outer_wrap.replaceChild(t,div);
MOVE.isMove = false;
}
document.body.removeChild(el);
el = null;
document.body.style.cursor = 'normal';
document.onmouseup = null;
}
}
}
</script>
</body>
</html> 方法二： <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js实现无刷新添加新层，拖动DIV层可互换位置丨芯晴网页特效丨CsrCode.Cn</title>
<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 #0066CC;
margin:3px;
}
.content .center{float:left;border:1px solid #FF0000;margin:3px;width:57%}
.content .right{float:right;width:20%;border:1px solid #FF00FF;margin:3px}
.mo{height:auto;border:1px solid #CCC;margin:3px;background:#FFF}
.mo h1{background:#ECF9FF;height:18px;padding:3px;cursor:move}
.closediv{cursor:default;}
.minusspan{cursor:default;}
.mo .nr{height:80px;border:1px solid #F3F3F3;margin:2px}
h1{margin:0px;padding:0px;text-align:left;font-size:12px}
.dragging {
FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=60); opacity: 0.6; moz-opacity: 0.6
}
</style>
<script language="javascript">
var dragobj={}
window.onerror=function(){return false}
var domid=12
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.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=addevent;
//添加折叠和关闭按钮
var tt = document.createElement("div");
tt.style.cssText = "float:left"; var span = document.createElement("span");
span.innerHTML = "--"+o[i].innerHTML;
span.style.cssText = "cursor:default;";
span.onmousedown = minusDiv;
tt.appendChild(span); var close = document.createElement("div");
close.innerHTML = "X";
close.style.cssText = "cursor:default;float:right";
close.onmousedown = closeDiv;
o[i].innerHTML = "";
o[i].appendChild(tt);
o[i].appendChild(close);
}
}
//折叠或者显示层
function minusDiv(e)
{
e=e||event
var nr = this.parentNode.parentNode.nextSibling; //取得内容层
nr.style.display = nr.style.display==""?"none":"";
}
//移出层
function closeDiv(e)
{
e=e||event
var mdiv = this.parentNode.parentNode; //取得目标层
oDel(mdiv);
}
function addevent(e){
if(dragobj.o!=null)
return false
e=e||event
dragobj.o=this.parentNode
dragobj.xy=getxy(dragobj.o)
dragobj.xx=new Array((e.x-dragobj.xy[1]),(e.y-dragobj.xy[0]))
//dragobj.o.className = 'dragging';
dragobj.o.style.width=dragobj.xy[2]+"px"
dragobj.o.style.height=dragobj.xy[3]+"px"
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)'; //添加拖动透明效果
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 red"; //ikaiser添加，实现虚线框
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, dragobj.o) //传递当前拖动对象
}
}
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;
}else
return 0;
}
//将当前拖动层在拖动时可变化大小，预览效果
function createtmpl(e, elm){
for(var i=0;i<domid;i++){
if(document.getElementById("m"+i) == null) //已经移出的层不再遍历
continue;
if($("m"+i)==dragobj.o)
continue
var b=inner($("m"+i),e)
if(b==0)
continue
dragobj.otemp.style.width=$("m"+i).offsetWidth
elm.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"
}
}
}
function add_div()
{
var o=document.createElement("div")
o.className="mo"
o.id="m"+domid
$('dom0').appendChild(o)
o.innerHTML="<h1>dom"+domid+"</h1><div class="nr"></div>"
o.getElementsByTagName("h1")[0].onmousedown=addevent
domid++
}
</script>
</head>
<body>
<INPUT TYPE="button" value="添加一个新的DIV层" onclick="add_div();">
<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>
<div class="center" id=dom1>
<div class="mo" id=m3><h1>dom3</h1><div class="nr"></div></div>
<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>
<div class="right" id=dom2>
<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>
</body>
</html>
JS拖动DIV布局的更多相关文章
- JS 拖动DIV 需要JQUERY 支持
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS拖动div的原理
要实现移动窗体,首先要捕获三个参数:1.a = 鼠标点击时的坐标.2.b = 被移动窗体的左顶点坐标.3.c = 鼠标移动时的坐标.然后还要算出你鼠标无论点击窗体哪个位置,移动改变的都是 (d = 窗 ...
- javascript拖动div
div拖动代码,在用此代码之前,你可能需要将你需要拖动的元素style设置position: absolute; #textareaSavaDiv{ position: absolute; right ...
- js实现可拖动Div
随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...
- JS实现拖动div层移动
JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别---- pageX,pageY,layerX,layerY,clientX,clientY,screen ...
- easyUI draggable插件使用不当，导致拖动div内部文本框无法输入；设置echarts数据为空时就显示空白，不要动画和文字
先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
- [可拖动DIV]刚开通博客顺便就写了点东西！
说说我自己的思路 首先需要一个初始div div { border: 1px #333 solid; width: 200px; height: 50px; } <div id="od ...
- DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV
DIV布局网页的第三种方式:覆盖.DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框. 请看代码: HTML部分: XML/HTML Code复 ...
- js拖动层
模仿网易彩票网(http://caipiao.163.com/)的登陆框自己做了一个拖动层,不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态(cursor:text;) <!DOCT ...
随机推荐
- 基于MDK的ARM-GCC开发环境建立及新唐M0的HID类设备的C++开发
一,下载安装测试arm-none-eabi-gcc编译工具链 1,查看arm-none-eabi-gcc编译工具版本 打开网页:https://sourcery.mentor.com/G ...
- Pro/E 5.0安装图解教程（也适用于Creo Elements/Pro 5.0）
安装前必读:☆ 本教程适用于 32 位 proe 5.0 M010,M020,M030,M040,M050,M060 过程完全一样:☆ 本教程用于 64 位 proe 5.0 M010,M020,M0 ...
- 电脑Win7如何取得文件管理所有权（提供各种GHOST版本的Windows）
电脑Windows7系统如何取得文件管理所有权?从 VISTA开始,微软对操作系统的安全性有了明显的提高,这样使得以前我们在XP下都可以打开或删除的文件(夹),无法在WIN7下进行操作.就算是在 Ad ...
- Android Material Design 之 Toolbar的使用
Material Design是谷歌提出来的最新ui设计规范,我想actionbar大家也许并不陌生,toolbar简单而言可以看做为actionbar的升级版,相比较actionbar而言,tool ...
- Jsoup代码解读之四-parser
Jsoup代码解读之四-parser 作为Java世界最好的HTML 解析库,Jsoup的parser实现非常具有代表性.这部分也是Jsoup最复杂的部分,需要一些数据结构.状态机乃至编译器的知识.好 ...
- HDU2008-数值统计
描述: 统计给定的n个实数中,负数.零和正数的个数. 代码: #include<stdio.h> #include<string.h> #include<iostream ...
- jmeter 通过ant集成到jenkins
jmeter可以通过ant自动执行测试脚本,然后集成到jenkins上,并发送测试报告 1.下载安装ant 2.将jmeter安装包extras文件夹里ant-jemter-1.1.1.jar 复制到 ...
- 编写带参数decorator
无参的@log装饰器: def log(f): def fn(x): print 'call ' + f.__name__ + '()...' return f(x) return fn 发现对于被装 ...
- JavaWEB开发中的/到底代表什么
- 【分享】JS生成随机字符串
之前忘了从哪里找到的一段代码,整理电脑时,记录为博文备查,原创不是我. function randomString(len) { len = len || 32; var $chars = 'ABCD ...