Alert message if tolerance conditions not met

Question

I am using tolerance: "fit" for my droppable div which works perfectly. it drops only when the draggable object fits the droppable div.

$('#drag').draggable({ revert: "invalid"});
    $('#drop').droppable({ tolerance: "fit" });

What I want is , I want to alert a message if user drops the draggable div which is not fit to droppable , Saying "Please drop object within the Container ". Any idea how to do it ? I found nothing regarding this.

Small Demo

Just to clarify, you want the alert when the draggable is dropped outside the droppable? — Sami, Feb 10 '16 at 07:27
@Sami outside or even if only half of draggable is dropped inside droppable..(thats why i said `if tolerance conditions not met` ) — Amar Singh, Feb 10 '16 at 07:29
Check if this does the trick: http://stackoverflow.com/a/8093433/3279876 — Sami, Feb 10 '16 at 07:40
Possible duplicate of [jQuery drag and drop - checking for a drop outside a droppable](http://stackoverflow.com/questions/8092771/jquery-drag-and-drop-checking-for-a-drop-outside-a-droppable) — Sami, Feb 10 '16 at 07:43
Edited your fiddle to a working one also: http://jsfiddle.net/jWNkh/47/ — Sami, Feb 10 '16 at 07:45

Jai · Answer 1 · 2016-02-10T09:36:41.820

It might not be a great solution but something you can work with.

It should be done with the stop callback with thee use of Element.getBoundingClientRect() and you can do something like this:

$('#drag').draggable({
  revert: "invalid",
  stop: function(event, ui) {
    var drop = $("#drop")[0].getBoundingClientRect();
    var drag = ui.position;
    var bool = drag.top >= drop.top && 
               drag.left >= drop.left && 
               ui.helper.width() <= drop.width && 
               ui.helper.height() <= drop.height;
    console.log("drag", ui, "drop", drop);
    if (!bool) {
      $('pre').append('Please drop object within the Container.<br>');
    }
  }
});
$('#drop').droppable({
  tolerance: "fit"
});

#drag {
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: red;
}
#drop {
  width: 300px;
  height: 300px;
  margin: 5px;
  margin-top: 10px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<pre></pre>
<div id="drag">
</div>
<div id="drop">
</div>

looks promising and interesting. Can you please check my answer and tell me if I can do that too — Amar Singh, Feb 10 '16 at 08:39

score 0 · Answer 2 · answered Feb 10 '16 at 08:35

0

What I did is simply used a window variable. which is set during start: of draggable. and if dropped I am changing that window variable value in drop: of droppable and later checking if variable is changed then that means it was dropped.

Simple and sweet . Your views on it

answered Feb 10 '16 at 08:35

Amar Singh

5,464
2
26
55

yes that would be another idea and can be implemented. – Jai Feb 10 '16 at 08:38

Alert message if tolerance conditions not met

2 Answers2