如何使用javascript停止拖放重叠div
我正在制作一个页面，左边有一些可拖动的div，右边有4个框，可以删除这些div，但当我把div放到另一个时，
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
<style type="text/css">
.gh{width:96%;height:auto;padding:10px;border:1px solid #aaaaaa;clear: both;margin:10px 10px 10px 10px;overflow:none;
position: relative;
display: block;
}
.leftbox{clear: both;
border:2px solid green;
float: left;
width: 100%;
height: 280px;
margin: 5px;
overflow: none;
overflow:scroll;
transition: all 0.2s ease;
z-index: 1000;
background:white;
position: absolute;
}
.leftbox2{
border:2px solid green;
float: left;
width: 100%;
height: 280px;
margin: 5px;
overflow: none;
overflow:scroll;
transition: all 1s ease;
z-index: 1;
background:white;
position: absolute;
}
.rightbox{clear: both;
border:3px solid red;
float: left;
width: 100%;
height: 280px;
margin: 5px;
overflow:scroll;
transition: all 2s ease;
}
.rightbox2{clear: both;
border:3px solid red;
float: left;
width: 100%;
height: 280px;
margin: 5px;
overflow:scroll;
transition: all 2s ease;
}
ul{
list-style-type: none;
}
.go{
min-height:300px;
height: 800px;
width: 100%;
overflow:scroll;
}
.btn{
width: 100%;
}
</style>
<!-- language: lang-html -->
<div class="row ">
<div class="col-md-4 me">
<div class="big-title">
<h1 class="col-md-12" style="text-align:center;">
Wishlist
</h1>
</div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)" class="go">
<ul>
<li >
<div id="drag0" class="gh col-md-12" draggable="true" ondragstart="drag(event)" >
sdfd
</div>
</li>
<li>
<div id="drag3" class="gh col-md-12" draggable="true" ondragstart="drag(event)">
dasdsa
</div>
</li>
<li>
<div id="drag4" class="gh col-md-12" draggable="true" ondragstart="drag(event)">
<img class="img img-responsive col-md-4" src="images/blog-mini-01.jpg">
<div class="col-md-8">
<div class="big-title" style="text-align:center">
<h3>This is a sample tfa jkljankjbfhbfklhabitle</h3>
</div>
<ul class="col-md-12">
<li class="col-md-6 pull-left"><i class="fa fa-university" aria-hidden="true"> Fees</i></li>
<li class="col-md-6 pull-right"><i class="fa fa-university" aria-hidden="true"> Rating</i></li>
<li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> Duration </i></li>
<li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> University </i></li>
</ul>
</div>
<div>
<ul>
<li class="col-md-6">
<a href="" type="submit" class="btn btn-primary">Go to course>></a>
</li>
<li class="col-md-6">
<a href="" type="submit" class="btn btn-primary ">Remove</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<div id="drag5" class="gh col-md-12" draggable="true" ondragstart="drag(event)">
<img class="img img-responsive col-md-4" src="images/blog-mini-01.jpg">
<div class="col-md-8">
<div class="big-title" style="text-align:center">
<h3>This is a sample tfa jkljankjbfhbfklhabitle</h3>
</div>
<ul class="col-md-12">
<li class="col-md-6 pull-left"><i class="fa fa-university" aria-hidden="true"> Fees</i></li>
<li class="col-md-6 pull-right"><i class="fa fa-university" aria-hidden="true"> Rating</i></li>
<li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> Duration </i></li>
<li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> University </i></li>
</ul>
</div>
<div>
<ul>
<li class="col-md-6">
<a href="" type="submit" class="btn btn-primary">Go to course>></a>
</li>
<li class="col-md-6">
<a href="" type="submit" class="btn btn-primary ">Remove</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<div id="drag43" class="gh col-md-12" draggable="true" ondragstart="drag(event)">
<img class="img img-responsive col-md-4" src="images/blog-mini-01.jpg">
<div class="col-md-8">
<div class="big-title" style="text-align:center">
<h3>This is a sample tfa jkljankjbfhbfklhabitle</h3>
</div>
<ul class="col-md-12">
<li class="col-md-6 pull-left"><i class="fa fa-university" aria-hidden="true"> Fees</i></li>
<li class="col-md-6 pull-right"><i class="fa fa-university" aria-hidden="true"> Rating</i></li>
<li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> Duration </i></li>
<li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> University </i></li>
</ul>
</div>
<div>
<ul>
<li class="col-md-6">
<a href="" type="submit" class="btn btn-primary">Go to course>></a>
</li>
<li class="col-md-6">
<a href="" type="submit" class="btn btn-primary ">Remove</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<div id="drag41" class="gh col-md-12" draggable="true" ondragstart="drag(event)">
<img class="img img-responsive col-md-4" src="images/blog-mini-01.jpg">
<div class="col-md-8">
<div class="big-title" style="text-align:center">
<h3>This is a sample tfa jkljankjbfhbfklhabitle</h3>
</div>
<ul class="col-md-12">
<li class="col-md-6 pull-left"><i class="fa fa-university" aria-hidden="true"> Fees</i></li>
<li class="col-md-6 pull-right"><i class="fa fa-university" aria-hidden="true"> Rating</i></li>
<li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> Duration </i></li>
<li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> University </i></li>
</ul>
</div>
<div>
<ul>
<li class="col-md-6">
<a href="" type="submit" class="btn btn-primary">Go to course>></a>
</li>
<li class="col-md-6">
<a href="" type="submit" class="btn btn-primary ">Remove</a>
</li>
</ul>
</div>
</div>
</li><li>
<div id="drag465" class="gh col-md-12" draggable="true" ondragstart="drag(event)">
<img class="img img-responsive col-md-4" src="images/blog-mini-01.jpg">
<div class="col-md-8">
<div class="big-title" style="text-align:center">
<h3>This is a sample tfa jkljankjbfhbfklhabitle</h3>
</div>
<ul class="col-md-12">
<li class="col-md-6 pull-left"><i class="fa fa-university" aria-hidden="true"> Fees</i></li>
<li class="col-md-6 pull-right"><i class="fa fa-university" aria-hidden="true"> Rating</i></li>
<li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> Duration </i></li>
<li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> University </i></li>
</ul>
</div>
<div>
<ul>
<li class="col-md-6">
<a href="" type="submit" class="btn btn-primary">Go to course>></a>
</li>
<li class="col-md-6">
<a href="" type="submit" class="btn btn-primary ">Remove</a>
</li>
</ul>
</div>
</div>
</li><li>
<div id="drag45" class="gh col-md-12" draggable="true" ondragstart="drag(event)">
<img class="img img-responsive col-md-4" src="images/blog-mini-01.jpg">
<div class="col-md-8">
<div class="big-title" style="text-align:center">
<h3>This is a sample tfa jkljankjbfhbfklhabitle</h3>
</div>
<ul class="col-md-12">
<li class="col-md-6 pull-left"><i class="fa fa-university" aria-hidden="true"> Fees</i></li>
<li class="col-md-6 pull-right"><i class="fa fa-university" aria-hidden="true"> Rating</i></li>
<li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> Duration </i></li>
<li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> University </i></li>
</ul>
</div>
<div>
<ul>
<li class="col-md-6">
<a href="" type="submit" class="btn btn-primary">Go to course>></a>
</li>
<li class="col-md-6">
<a href="" type="submit" class="btn btn-primary ">Remove</a>
</li>
</ul>
</div>
</div>
</li><li>
<div id="drag47" class="gh col-md-12" draggable="true" ondragstart="drag(event)">
<img class="img img-responsive col-md-4" src="images/blog-mini-01.jpg">
<div class="col-md-8">
<div class="big-title" style="text-align:center">
<h3>This is a sample tfa jkljankjbfhbfklhabitle</h3>
</div>
<ul class="col-md-12">
<li class="col-md-6 pull-left"><i class="fa fa-university" aria-hidden="true"> Fees</i></li>
<li class="col-md-6 pull-right"><i class="fa fa-university" aria-hidden="true"> Rating</i></li>
<li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> Duration </i></li>
<li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> University </i></li>
</ul>
</div>
<div>
<ul>
<li class="col-md-6">
<a href="" type="submit" class="btn btn-primary">Go to course>></a>
</li>
<li class="col-md-6">
<a href="" type="submit" class="btn btn-primary ">Remove</a>
</li>
</ul>
</div>
</div>
</li><li>
<div id="drag48" class="gh col-md-12" draggable="true" ondragstart="drag(event)">
<img class="img img-responsive col-md-4" src="images/blog-mini-01.jpg">
<div class="col-md-8">
<div class="big-title" style="text-align:center">
<h3>This is a sample tfa jkljankjbfhbfklhabitle</h3>
</div>
<ul class="col-md-12">
<li class="col-md-6 pull-left"><i class="fa fa-university" aria-hidden="true"> Fees</i></li>
<li class="col-md-6 pull-right"><i class="fa fa-university" aria-hidden="true"> Rating</i></li>
<li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> Duration </i></li>
<li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> University </i></li>
</ul>
</div>
<div>
<ul>
<li class="col-md-6">
<a href="" type="submit" class="btn btn-primary">Go to course>></a>
</li>
<li class="col-md-6">
<a href="" type="submit" class="btn btn-primary ">Remove</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-md-8 red">
<div class="col-md-6">
<h4 style="text-align:center">Done</h4>
<section class="leftbox" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" >
<button id="menu" onclick="changec()" class="pull-right fixed-top">+</button>
</section>
</div>
<div class="col-md-6">
<h4 style="text-align:center">Tracking</h4>
<section class="rightbox" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<button id="menu" onclick="changec2()" class="pull-right fixed-top">+</button>
</section>
</div>
<div class="col-md-6">
<h4 style="text-align:center">Pursuing</h4>
<section class="leftbox2" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
<button id="menu" onclick="changec3()" class="pull-right fixed-top">+</button>
</section>
</div>
<div class="col-md-6">
<h4 style="text-align:center">Dropped</h4>
<section class="rightbox2" id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">
<button id="menu" onclick="changec4()" class="pull-right fixed-top">+</button>
</section>
</div>
</div>
</div>
1 个答案:
答案 0 :(得分：1)
从这个答案中获得帮助 - HTML disable Drop event, div box child contents overlap 稍微修改了你的功能。试试这个。
function drop(ev) {
var eleid = ev.dataTransfer.getData("Text");
var el = ev.target;
if (el.id != 'div1' && el.id != 'div2' && el.id != 'div3' && el.id != 'div4') {
// el = el.parentNode;
if(el.id != 'div6') {
el = document.getElementById('div6');
}
}
el.appendChild(document.getElementById(eleid));
ev.preventDefault();
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？