CODEWITHSUNDEEP
jqueryhtmljquery-uidrag-and-drop
vedankita kumbhar
vedankita kumbhar

Reputation: 1490

Prevent draggable item to be drop over specific element

I have created multiple hotspots which are draggable, but my problem is in same container there is one section; in that section I don't want to drop draggable element. Please check below 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 above snippet hotspots are droppable on that red background section. How to prevent that? Please check below image for better understandig.

image

Also on drop how to check two hotspots are overlapped on not? If two hotsots are overlapping each other then I want to change class which will change direction of hotspot. Thanks

Upvotes: 4

Views: 7499

Answers (3)

Mohtisham Zubair
Mohtisham Zubair

Reputation: 723

You can achieve this by without any plugin like this

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

});

Upvotes: 4

Mihai T
Mihai T

Reputation: 17687

you should use an additional plugin to preventCollision with a sibling

see here > https://github.com/dsbaars/jq-ui-draggable-collision

or here > https://sourceforge.net/projects/jquidragcollide/

your final code would be

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


});

see more on this subject on SO > Restrict jQuery draggable items from overlapping/colliding with sibling elements

hope it helps.

Upvotes: 1

Dmytro Grynets
Dmytro Grynets

Reputation: 953

You can try on stop check if draggable position is over restricted area and if it is - set revert to true, and on start make it false again

Upvotes: 0

Related Questions