Wie man die Überlappung von divs in drag and drop mit JavaScript stoppt

Ich mache eine Seite, in der es einige ziehbare divs auf der linken Seite gibt und 4 Felder rechts, in denen diese divs gelöscht werden können, aber wenn ich div auflege ein anderes,Wie man die Überlappung von divs in drag and drop mit JavaScript stoppt

so etwas passiert. Ich möchte, dass sie sich nicht überschneiden, sondern sich automatisch ausrichten, wie in 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>

Quelle

2016-07-13 Sarthak Tuteja

Got Hilfe dieser Antwort - HTML disable Drop event, div box child contents overlap Verändert Ihre Funktion ein wenig. Versuche dies.

 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(); 
}

Quelle

2016-07-13 12:22:17

Vielen Dank es funktioniert.Aber wenn ich den Inhalt des Div erhöhen es funktioniert nicht. –

In Ihrem CSS haben Sie Klasse .gh mit Höhe: 50px; Hast du versucht, das zu erhöhen? Das könnte das Problem sein. –

Ich habe Höhe zu auto und eingefügt einige Bilder und Schaltflächen in verschachtelten divs.Now meine divs aussehen in etwa so: https: //jsfiddle.net/994y3f92/ –

Wie man die Überlappung von divs in drag and drop mit JavaScript stoppt

Antwort

Verwandte Themen