1

I want to add a callback for when a draggable item breaks it's containment. I have this function:

function makeDraggable(){
    $( ".draggable" ).draggable({ containment: "parent" , grid: [ 25, 25 ] });
}

Is there a simple way to achieve this, without using collision detection? If not, how would I go about doing the collision detection?

Robin Andrews
  • 3,514
  • 11
  • 43
  • 111
  • Can you explain what exactly do you mean by "break it's containment"? Touches it? Dropped inside? Dragged out? It's hard to understand. – Dekel Aug 07 '16 at 02:23
  • Good point @Dekel. What I mean is when a draggable element completely leaves its container, I want to delete it. Like drag and drop where everything outside the parent is a rubbish bin. – Robin Andrews Aug 07 '16 at 06:56

1 Answers1

2

You can check the 4 corners of the element when it is dropped against the 4 corners of another element to see if any of the corners are inside that element and do whatever you want from that point.

The problem with containment is that the drag can be done only within that containment (you cannot drag the element outside that containment).

Here is an example you can use (I used the console.log there 

$(function() {
  $("#draggable").draggable({
    stop: function( event, ui ) {
      droppapleBox = $('#droppable-area')[0].getBoundingClientRect()
      draggableBox = ui.helper[0].getBoundingClientRect()
      if (draggableBox.left > droppapleBox.right || draggableBox.right < droppapleBox.left || draggableBox.top > droppapleBox.bottom || draggableBox.bottom < droppapleBox.top) {
        console.log('Element dropped completely outside the drop area');
      } else {
        console.log('Element dropped inside the drop area');
      }
    }
  });
});
body {
  font-family: arial;
  font-size: 12px;
}
.drag-box {
  width: 50px;
  height: 50px;
}

.drop-box {
  width: 150px;
  height: 150px;
  margin-left: 70px;
  margin-top: 70px;
  margin-bottom: 250px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<body>
 
<div id="droppable-area" class="drop-box ui-widget-header">
  <p>Drop me here</p>
  <div id="draggable" class="drag-box ui-widget-content">
    <p>Drag Me</p>
  </div>
</div>
Dekel
  • 60,707
  • 10
  • 101
  • 129
  • what if you don't know the droppable area name? – eqiz Aug 26 '16 at 00:29
  • Do you have any other information regarding the droppable element? – Dekel Aug 26 '16 at 00:42
  • My question was more based off a different scenario. When the draggable clone is first moved into the droppable, and then moved outside of the containment area into another droppable area to be able to fully "move" the item into that containment area from previous. I thought I could use your code if I didn't know the actual name of the droppable area. My post is at: http://stackoverflow.com/questions/39156827/how-to-append-draggable-into-new-droppable-area – eqiz Aug 26 '16 at 00:53