Предотвращать перетаскивание элемента для определенного элемента

Question

Я создал несколько горячих точек, которые перетаскиваются, но моя проблема в том же контейнере есть одна секция; в этом разделе я не хочу отбрасывать перетаскиваемый элемент. Пожалуйста, проверьте ниже фрагмент.

$(".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>

В приведенном фрагменте горячих точек Droppable на этом красном фоне разделе. Как это предотвратить? Пожалуйста, проверьте ниже изображение для лучшего понимания.

Также на капли, как проверить два горячих точек накладываются друг на друга, не? Если два hotsots перекрываются друг с другом, я хочу изменить класс, который изменит направление точки доступа. Благодаря

Answer 1

Вы можете достичь этого без каких-либо плагинов, как это

$(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

Вы можете попробовать на проверке остановки, если перетаскиваемое положение над запретной зоной, и если он - устанавливается вернуться к истинному, и на начале делает ложным снова

Answer 3

вы должны использовать дополнительный плагин для preventCollision с родным братом

посмотреть здесь>https://github.com/dsbaars/jq-ui-draggable-collision

или здесь>https://sourceforge.net/projects/jquidragcollide/

ваш окончательный код будет

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


}); 

видеть больше на эту тему на SO>Restrict jQuery draggable items from overlapping/colliding with sibling elements

надеюсь, что это помогает.