Prevent draggable item to be drop over specific element

Question

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.

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

score 4 · Accepted Answer · answered Feb 14 '17 at 14:47

4

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

});

answered Feb 14 '17 at 14:47

Mohtisham Zubair

723
5
15

I have implemented your suggested code it works fine only problem is some part of draggable element overlapp on section then it is not revert back. please check fiddle https://fiddle.jshell.net/2hvcjvf3/2/ – vedankita kumbhar Feb 15 '17 at 04:58
Thanks but this is not a problem for me. Please check image for understanding https://s24.postimg.org/c12wbc6qd/Capture.png – vedankita kumbhar Feb 15 '17 at 07:14
In above image element not revert even if some part of it is in section – vedankita kumbhar Feb 15 '17 at 07:15
1

Though it is not an elegant solution, but a work around could be to put this section in a parent div with bit larger attributes of width and height and then put that in droppable check. May be some CSS can help us too. – Mohtisham Zubair Feb 15 '17 at 08:13
1

please check what I mean though you need to tweak things a bit https://fiddle.jshell.net/2hvcjvf3/5/ – Mohtisham Zubair Feb 15 '17 at 08:39

score 1 · Answer 2 · edited May 23 '17 at 12:17

1

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.

edited May 23 '17 at 12:17

Community

1
1

answered Feb 14 '17 at 10:44

Mihai T

17,254
2
23
32

Thanks for solution. I will try this. :) – vedankita kumbhar Feb 14 '17 at 10:56
let me know if it helps – Mihai T Feb 14 '17 at 11:10
Please tell me it will work with jquery-ui-1.12.1.min.js? While implementing I am getting error "Cannot read property 'options' of undefined" – vedankita kumbhar Feb 14 '17 at 11:29
check the instalation guide from the first link Copy jquery-ui-draggable-collision.js or any specific or minified version of jquery-ui-draggable-collision(-x.x.x)(.min).js into your javascript directory Make sure that jquery 1.10.1 or later is somewhere accessible Make sure that jqueryui 10.4 or later is somewhere accessible Make sure that jquery-collision 1.0.1 or later is somewhere accessible – Mihai T Feb 14 '17 at 11:43
Yes I am trying the same. I don't know what is wrong in my installation. Thanks for help. – vedankita kumbhar Feb 14 '17 at 11:50

score 0 · Answer 3 · answered Feb 14 '17 at 10:22

0

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

answered Feb 14 '17 at 10:22

Dmytro Grynets

923
11
29

Prevent draggable item to be drop over specific element

3 Answers3