怎么用JS实现当一个div(div可拖动)覆盖另一个div时消失 68
如题，就是比如我把这个可以拖动的div拖到某个div区域时，就会消失div1是可以****随意拖动放置****的div，div2是不能拖动的div然后当我把div1拖到d...
如题，就是比如我把这个可以拖动的div拖到某个div区域时，就会消失
div1是可以****随意拖动放置****的div，div2是不能拖动的div
然后当我把div1拖到div2上方时，div1消失，div2不消失
注意打***的关键词 展开
div1是可以****随意拖动放置****的div，div2是不能拖动的div
然后当我把div1拖到div2上方时，div1消失，div2不消失
注意打***的关键词 展开
3个回答
展开全部
不考虑IE6的话就比较简单，判断一下是否到底部，到了之后将这个div的position设置为fixed就好了top值是固定的 但是如果要考虑IE6的话就麻烦一点，因为IE6不支持fixed这个属性你只能通过absolute来处理而此时top值是要不停地改变的，而且在IE6中这个div在滚动时会不停晃动，解决方法是有的但是代价过高，看你的取舍
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
引用司马刀剑的回答：
这个跟html元素的定位方式有关.
div默认的是 后面一个div根据前一个div来定位. 也就是相对定位;
而你这里需要的,实际上就是两个div根据他们的父容器来定位, 也就是绝对定位. 并且, 后面一个div覆盖到前一个上面.
所以, 你应该使用的是
<style>.parentDiv{position:relative;}.div1{position:absolute;z-index:1;}.div2{position:absolute;z-index:2;}</style><div class="parentDiv"><div class="div1">我在下面</div><div class="div2">我在上面</div></div>
这个跟html元素的定位方式有关.
div默认的是 后面一个div根据前一个div来定位. 也就是相对定位;
而你这里需要的,实际上就是两个div根据他们的父容器来定位, 也就是绝对定位. 并且, 后面一个div覆盖到前一个上面.
所以, 你应该使用的是
<style>.parentDiv{position:relative;}.div1{position:absolute;z-index:1;}.div2{position:absolute;z-index:2;}</style><div class="parentDiv"><div class="div1">我在下面</div><div class="div2">我在上面</div></div>
展开全部
<head>
<meta charset="utf-8">
<title>拖拽测试</title>
<style>
div {
float: left;
width: 100px;
height: 35px;
margin: 15px;
margin-right: 100px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<p>在两个矩形框中DIV元素:</p>
<div draggable="true" id="div1">可拖动div!</div>
<div id="div2" ondragover="dropOver(event)">
不可拖动div
</div>
<script>
function dropOver(event) {
console.log("dropOver");
document.getElementById("div2").style.display = "none";
}
</script>
</body>
</html>
采用拖拽事件然后控制显示才能达到你要的效果吧
<meta charset="utf-8">
<title>拖拽测试</title>
<style>
div {
float: left;
width: 100px;
height: 35px;
margin: 15px;
margin-right: 100px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<p>在两个矩形框中DIV元素:</p>
<div draggable="true" id="div1">可拖动div!</div>
<div id="div2" ondragover="dropOver(event)">
不可拖动div
</div>
<script>
function dropOver(event) {
console.log("dropOver");
document.getElementById("div2").style.display = "none";
}
</script>
</body>
</html>
采用拖拽事件然后控制显示才能达到你要的效果吧
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个跟html元素的定位方式有关.
div默认的是 后面一个div根据前一个div来定位. 也就是相对定位;
而你这里需要的,实际上就是两个div根据他们的父容器来定位, 也就是绝对定位. 并且, 后面一个div覆盖到前一个上面.
所以, 你应该使用的是
<style>.parentDiv{position:relative;}.div1{position:absolute;z-index:1;}.div2{position:absolute;z-index:2;}</style><div class="parentDiv"><div class="div1">我在下面</div><div class="div2">我在上面</div></div>
div默认的是 后面一个div根据前一个div来定位. 也就是相对定位;
而你这里需要的,实际上就是两个div根据他们的父容器来定位, 也就是绝对定位. 并且, 后面一个div覆盖到前一个上面.
所以, 你应该使用的是
<style>.parentDiv{position:relative;}.div1{position:absolute;z-index:1;}.div2{position:absolute;z-index:2;}</style><div class="parentDiv"><div class="div1">我在下面</div><div class="div2">我在上面</div></div>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
