Verhindern, dass ziehbares Element über ein spezifisches Element fällt

Question

Ich habe mehrere Hotspots erstellt, die ziehbar sind, aber mein Problem ist in demselben Container, in dem es einen Abschnitt gibt; In diesem Abschnitt möchte ich kein ziehbares Element fallen lassen. Bitte überprüfen Sie das folgende Snippet.

$(".draggable").draggable({ 
 
    containment: ".container", 
 
    
 
});

.container{ 
 
    width:100%; 
 
    position:relative; 
 
    height:300px; 
 
    background:#eaeaea; 
 
} 
 
label{display:inline-block;} 
 
.draggable { 
 
    position: absolute!important; 
 
    min-width: 85px; 
 
    border: none!important; 
 
    background: transparent!important; 
 
    top:0; 
 
    left:0; 
 
    z-index:1; 
 
} 
 
.draggable label:first-child{ 
 
    background:blue; 
 
    border:1px solid green; 
 
    width:10px; 
 
    height:10px; 
 
    border-radius:50%; 
 
    float:left; 
 
    margin-top:3px; 
 
    margin-right:10px; 
 
} 
 

 
.draggable label:last-child { 
 
    overflow: hidden; 
 
    max-width: 100px; 
 
    word-wrap: break-word; 
 
    padding: 5px; 
 
    background: #9afff1; 
 
} 
 

 
.section { 
 
    position: absolute; 
 
    width: 240px; 
 
    height: 100px; 
 
    background: #dfbaba; 
 
    bottom: 0; 
 
    border: 1px solid #d5a1a1; 
 
}

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div class="container"> 
 
    <div class="draggable"> 
 
    <label></label> 
 
    <label>hotspot1</label> 
 
    </div> 
 
    <div class="draggable"> 
 
    <label></label> 
 
    <label>hotspot2</label> 
 
    </div> 
 
    <div class="draggable"> 
 
    <label></label> 
 
    <label>hotspot3</label> 
 
    </div> 
 
    
 
    <div class="section"> 
 
    </div> 
 
</div>

In Snippet Hotspots sind auf dem roten Hintergrund Abschnitt abwerfbaren. Wie verhindere ich das? Bitte überprüfen Sie das Bild zum besseren Verständnis.

Auch auf Tropfen, wie Sie überprüfen zwei Hotspots sind nicht überlappen? Wenn zwei HotSots sich gegenseitig überlappen, möchte ich die Klasse ändern, die die Richtung des Hotspots ändert. Dank

Answer 1

Sie können dies erreichen, indem er ohne Plugin ähnliche

$(document).ready(function(){ 

    $(".draggable").draggable({ 
     containment: ".container" ,    
     stop: function(event,ui) {        
     if($(this).draggable('option','revert')) 
      $(this).draggable('option','revert', false);   
      }, 
    }); 
    //this will prevent any collision 
     $(".draggable").droppable({ 
      drop: function(event, ui) { 
      ui.draggable.draggable('option', 'revert', true);      
      } 
      });  
     // this will prevent drop on section  
     $(".section").droppable({ 
       drop: function(event, ui) {  
      ui.draggable.draggable('option', 'revert', true);   
       } 
     });  

}); 

Answer 2

Sie auf Stop-Check versuchen können, wenn ziehbar Position über Sperrgebiet ist und wenn es - auf true gesetzt zurückkehren, und beim Start wieder es falsch machen

Answer 3

Sie ein zusätzliches Plugin preventCollision mit einem Geschwister verwenden sollten

siehe hier>https://github.com/dsbaars/jq-ui-draggable-collision

oder hier>https://sourceforge.net/projects/jquidragcollide/

Ihre endgültige Code

wäre

$(".draggable").draggable({ 
    containment: ".container", 
    obstacle: ".section", 
    preventCollision:true 


}); 

sehen mehr zu diesem Thema auf SO>Restrict jQuery draggable items from overlapping/colliding with sibling elements

hoffen, es hilft.