js 实现div定位

最新推荐文章于 2021-06-05 09:57:26 发布
最新推荐文章于 2021-06-05 09:57:26 发布
阅读量1.2w 收藏 1
点赞数
文章标签： div javascript class float function 
<html>
<head>
<mce:style>
<!--
body {  
-moz-user-focus:  ignore;  
-moz-user-input:  disabled;  
-moz-user-select:  none;  
}    
.divall{
width:300px;
float:left;
border:1px solid #cccccc;
margin:10px 10px 0px 0px;
}
.divtitle{
height:20px;
border-bottom:1px solid #cccccc;
background-color:#eeeeee;
line-height: 20px;
}
.divtitle1{
float:left;
width:250px;
cursor: move;
}
.divtitle2{
float:right;
width:40px;
}
.divcontent{
height:170px;
width:300px;
}
--></mce:style><style mce_bogus="1">body {  
-moz-user-focus:  ignore;  
-moz-user-input:  disabled;  
-moz-user-select:  none;  
}    
.divall{
width:300px;
float:left;
border:1px solid #cccccc;
margin:10px 10px 0px 0px;
}
.divtitle{
height:20px;
border-bottom:1px solid #cccccc;
background-color:#eeeeee;
line-height: 20px;
}
.divtitle1{
float:left;
width:250px;
cursor: move;
}
.divtitle2{
float:right;
width:40px;
}
.divcontent{
height:170px;
width:300px;
}</style>
<mce:script type="text/javascript"><!--
function move(element, e) {
    var target = element;
    var parent = element.parentNode;
    var zIndex = element.style.zIndex;
    
    // 获取目标div的左上角坐标
    var left = target.offsetLeft;
    var top = target.offsetTop;
    while(target = target.offsetParent){
        left += target.offsetLeft;
        top += target.offsetTop;
    }
    
    // 复制一个div以占据目标div的起始位置
    var newObj = document.createElement("div");
    newObj.innerHTML = element.innerHTML;
    newObj.className = element.className;
    parent.insertBefore(newObj, element);
    // 将目标div改为绝对定位并赋上初使坐标值
    element.style.position = "absolute";
    element.style.left = left;
    element.style.top = top;
    element.style.zIndex = 1000;
    element.style.backgroundColor = "#dddddd";
    
    // 注册事件
    if (document.addEventListener) {
        document.addEventListener("mousemove", startMove, true);
        document.addEventListener("mouseup", stopMove, true);
    } else {
        document.onmousemove = startMove;
        document.onmouseup = stopMove;
    }
    
    e = e || event;
    var deltaX = e.clientX - parseInt(element.style.left);
    var deltaY = e.clientY - parseInt(element.style.top);
    
    // 开始移动
    function startMove(e) {
        e = e || event;
        element.style.left = e.clientX - deltaX + "px";
        element.style.top = e.clientY - deltaY + "px";
    };
    // 停止移动并重新定位
    function stopMove(e) {
        e = e || event;
        var mouseX = e.clientX;
        var mouseY = e.clientY;
        
        // 取消注册的事件
        if (document.removeEventListener) {
            document.removeEventListener("mousemove", startMove, true);
            document.removeEventListener("mouseup", stopMove, true);
        } else {
            document.onmousemove = "";
            document.onmouseup = "";
        }
        
        // 根据鼠标移动情况重新排序div对象
        var divs = parent.childNodes;
        for(var i = 0; i < divs.length; i++){
            if(divs[i].tagName != "DIV")
                continue;
                
            var obj = divs[i];
            var left = obj.offsetLeft;
            var top = obj.offsetTop;
            var width = obj.clientWidth;
            var height = obj.clientHeight;
            
            while(obj = obj.offsetParent){
                left += obj.offsetLeft;
                top += obj.offsetTop;
            }
            
            // 判断鼠标松开的时候是否在某个div对象的可见区域内，如果为true，则将目标div放置到该div对象的前面
            if(left <= mouseX && mouseX <= left+width && top <= mouseY && mouseY <= top+height){
                parent.insertBefore(element, divs[i]);
            }
        }
        
        // 将目标div改回相对定位
        element.style.position = "relative";
        element.style.left = "0px";
        element.style.top = "0px";
        element.style.zIndex = zIndex;
        element.style.backgroundColor = "";
        
        // 删除占位div对象
        parent.removeChild(newObj);
    };
    return true;
}
function openCloseDiv(element, id){
    var target = document.getElementById(id);
    if(target.style.display == 'none'){
        target.style.display = 'block';
        element.innerHTML = '收起';
    } else {
        target.style.display = 'none';
        element.innerHTML = '展开';
    }
}
// --></mce:script>
<title>相对定位div块移动_自动排列</title>
</head>
<body onselectstart='return false;'>
<div id="mainDiv" style="width:950px;">
    <div id="div1" class="divall">
        <div class="divtitle">
            <div class="divtitle1"  onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题1</a></div>
            <div class="divtitle2">
                <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
            </div>
        </div>
        <div id="div1content" class="divcontent">内容1</div>
    </div>
    
    <div id="div2" class="divall">
        <div class="divtitle">
            <div class="divtitle1"  onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题2</a></div>
            <div class="divtitle2">
                <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
            </div>
        </div>
        <div id="div2content" class="divcontent">内容2</div>
    </div>
    
    <div id="div3" class="divall">
        <div class="divtitle">
            <div class="divtitle1"  onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题3</a></div>
            <div class="divtitle2">
                <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
            </div>
        </div>
        <div id="div3content" class="divcontent">内容3</div>
    </div>
    
    <div id="div4" class="divall">
        <div class="divtitle">
            <div class="divtitle1"  onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题4</a></div>
            <div class="divtitle2">
                <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
            </div>
        </div>
        <div id="div4content" class="divcontent">内容4</div>
    </div>
    
    <div id="div5" class="divall">
        <div class="divtitle">
            <div class="divtitle1"  onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题5</a></div>
            <div class="divtitle2">
                <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
            </div>
        </div>
        <div id="div5content" class="divcontent">内容5</div>
    </div>
    
    <div id="div6" class="divall">
        <div class="divtitle">
            <div class="divtitle1"  onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题6</a></div>
            <div class="divtitle2">
                <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
            </div>
        </div>
        <div id="div6content" class="divcontent">内容6</div>
    </div>
    
    <div id="div7" class="divall">
        <div class="divtitle">
            <div class="divtitle1"  onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题7</a></div>
            <div class="divtitle2">
                <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
            </div>
        </div>
        <div id="div7content" class="divcontent">内容7</div>
    </div>
    
    <div id="div8" class="divall">
        <div class="divtitle">
            <div class="divtitle1"  onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题8</a></div>
            <div class="divtitle2">
                <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
            </div>
        </div>
        <div id="div8content" class="divcontent">内容8</div>
    </div>
    
    <div style="width:300px;height:190px;float:left;margin:10px 10px 0px 0px;"> </div>
    <div style="clear: both;" mce_style="clear: both;"></div>
    
</div>
</body>
</html>

我是一只猫一只猫
关注
js跳转到指定div位置
07-21
网页不刷新跳转到指定位置
JavaScript与Div对层定位和移动获得坐标的实现代码
01-21
1:移动图层 获得点的x轴y轴坐标，从而进行绝对定位(注意：竖拉框会影响 x 轴 y 轴坐标值) 代码如下: var x,y,z,down=false,obj function init(){ obj=event.srcElement //事件触发对象 obj.setCapture() //设置属于...
用JS将页面定位到某个位置（DIV）
信念堤岸
09-22 1万+
，发现使用javascript中的window.scrollBy()存在一个问题：每刷新一次页面，滚动距离顶部的高度都会比上次递增我们定义的scroll_y值。  所以还是建议大家使用window.location.hash方法来自动将页面滚动到指定位置。  $(function(){ window.location.hash = "#title"; })   window.locatio
javascript设置DIV位置
感悟人生
11-25 4071
div id="myDIV" style="z-index: 9999999; position: absolute; display: none; height: 210px;width350px">table>            tr style="height: 25px">                td class="ModiHead" align="center">
用Javascript设置DIV的绝对位置
#维多利亚的秘密#
04-24 3593
在实际的开发中，我们经常要做到以下的效果： 虽然操作是很简单，但是相信大多数人都是“拿来主义”者，不会关心代码。 呵呵，其实今天自己也是被问到了，所以特别关注了一下DIV位置的确定。 废话少说，先建立一个htm页面 显示的内容 display:none，表示此层隐藏 position:absolute，表示此层的为绝对位置，方便后期进行绝对定位 添加事件，完成效果
js脚本定位div的位置
ssmcnred的博客
05-31 221
function clk(){     var e=window.event.srcElement;  div1.style.left=document.body.scrollLeft+window.event.clientX - window.event.offsetX ;  div1.style.top=document.body.scrollTop + window.event.clien...
通过绝对定位实现div重叠实例代码
09-25
在本例中，我们将详细讲解如何通过绝对定位实现div重叠的实例。 首先，要实现div的绝对定位，我们需要设置`position`属性为`absolute`。在CSS中，有几种定位方式，如静态（static）、相对（relative）、绝对...
js实现div拖动动画运行轨迹效果代码分享
10-23
通过上述步骤，可以实现div元素的拖动以及记录或不记录拖动轨迹的动画效果。这种实现方式的优点在于它使用了纯JavaScript代码，不依赖于任何第三方库，因此具有较高的灵活性和兼容性。开发者可以根据具体需求调整和...
原生javascript实现DIV拖拽并计算重复面积
12-11
在本示例中，我们探讨的是如何使用原生JavaScript实现一个功能，允许用户通过鼠标拖动div元素，并在拖动过程中计算这些div元素之间的重叠面积。以下是对关键知识点的详细解释： 1. **HTML 结构**：首先，HTML结构...
JS 实现Div向上浮动的实现代码
10-27
总结来说，该知识点介绍了一个简单的JavaScript实现div向上浮动效果的方法。通过HTML、CSS和JavaScript的结合使用，实现了一个具有交互性的动画效果。这不仅涉及到了基本的DOM操作，也包括了事件监听和定时器的使用...
转载：Javascript自动将页面滚动到指定位置
weixin_30734435的博客
10-12 644
本文转自：http://www.phpfuns.com/scripts/javascript/javascript-auto-scroll.shtml 昨天一个朋友问我如何在页面加载完成后，自动将页面定位到某个位置，当时有些忙，就没来得及解决。殊不知今天在做PHP教程的项目中也有了同样的需求：为了页面美观，需要只显示用户从楼盘相册点击后进入的相册幻灯页面的楼盘信息（也就是自动定位到了楼盘...
javascript点击按钮定位到本html上某个Div位置
happy81997的博客
06-05 827
<button style="margin-top: 30px;" onclick=" window.location.href = '#wrap'">Explore the bar-line chart</button>
【JavaScript】div+css定位position详解
滕柳
08-01 4011
1、div+css中的定位position 最主要的两个属性：absolute(绝对定位)、relative(相对定位)    （1）absolute(绝对定位)，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，因此不占据空间。    （2）relative(相对定位)，定位是相对的，那他是相对于什么呢？参照物是什么？    看代码： #left{background:#
js定位div坐标存入mysql_JavaScript与Div对层定位和移动获得坐标的实现代码
weixin_32563411的博客
02-01 133
JavaScript与Div对层定位和移动获得坐标的实现代码，需要的朋友可以参考下。1:移动图层 获得点的x轴y轴坐标，从而进行绝对定位(注意：竖拉框会影响 x 轴 y 轴坐标值)var x,y,z,down=false,objfunction init(){obj=event.srcElement //事件触发对象obj.setCapture() //设置属于当前对象的鼠标捕捉z=obj.sty...
javascript元素定位问题
weixin_46639294的博客
07-01 872
static 默认值。始终处于文档流给予的位置(无法使用left、right、top、bottom等设置元素的位置) relative 相对定位 通常设置块级元素div的位置position：relative 使div内部的元素以此定位 坐标系是原来自己的位置 可以设置left、top、right、bottom等值移到相对于原来位置的地方（不会破坏正常的文档流） absolute 绝对定位 通常设置div内部各种元素的位置position：absolute 坐标系是父级元素（拥有定位的..
html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码
weixin_41695715的博客
02-16 8241
对于网页编程开发人员来说，在网站页面开发的过程中，有时候我们需要实现当点击一个按钮或者超链接时，立刻滚动跳转定位到本页面中指定的位置。对于大多数的编程老手来说，这些都不是什么难事，但对于一些新手或者没有深入学习编程开发的人来说，可能不知道如何去实现，在这里就和大家分享一下html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码。 这里主要分为两种情况，分别是点击锚点实现跳转和点击button按钮实现跳转页面，下面就分别探讨一下两种方式的具体实现代码。 一：通过html锚点实现滚动定位到页面指定位
html获取div坐标,js获取DIV的位置坐标
weixin_31283549的博客
05-31 1417
方法一：var odiv=document.getElementByIdx_x('divid');alert(odiv.getBoundingClientRect().left);alert(odiv.getBoundingClientRect().top);方法二：function CPos(x, y){this.x = x;this.y = y;}function GetObjPos(ATar...
js 如何动态改变div的位置
热门推荐
zmbc48的专栏
01-21 3万+
在一个div中动态创建一个div，要取得这个div相对于父窗口的位置，我开始以为appendChild就是子div，取得这个子对象就是我想要的位置，但是不是这样的，它的位置还是相对document的。所以我做了一个实验：通过取得子窗口的位置减去父窗口的位置就可以了。 http://www.w3.org/TR/html4/loose.dtd"> New Document
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值