如何使用javascript停止拖放中的div重叠答案

【问题标题】：How to stop overlapping of divs in drag and drop using javascript如何使用javascript停止拖放中的div重叠
【发布时间】：2016-11-15 16:57:18
【问题描述】：

我正在制作一个页面，其中左侧有一些可拖动的 div，右侧有 4 个框可以放置这些 div，但是当我将 div 放在另一个上时，

类似的事情发生了。我希望它们不重叠而是自动对齐，就像在 JQuery Sortable 中一样：this:http://jqueryui.com/sortable/#placeholder.

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>

【问题讨论】：

标签： javascript html css twitter-bootstrap-3

【解决方案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();
}

【讨论】：

非常感谢它的工作。但是当我增加 div 的内容时它不起作用。
在你的css中，你的类.gh有高度：50px;你有没有尝试增加它？这可能是问题所在。
我已经将高度设置为自动并在嵌套的 div 中插入了一些图像和按钮。现在我的 div 看起来像这样：jsfiddle.net/994y3f92
在小提琴中不起作用。不能只拖动任何东西。但在我的地方工作。无论您向上或向下移动，都将附加在底部。所以给你的样本编号以获得更好的想法，比如样本 1、2 等......
我已经编辑了代码，希望这可以帮助你理解。 :)

【解决方案2】：

我刚刚将目标更改为 currentTarget，并且在拖放时我的元素不再相互重叠

function drop(even) {
        
        even.preventDefault();
        var fetchData = even.dataTransfer.getData("text");
        even.currentTarget.appendChild(document.getElementById(fetchData));
        

    }

【讨论】：