0

How do I know wether I am over/hover an element of a certain .classname when I stop moving the draggable and release the mouse button so the stop function is triggered?

I need to know this when I am NOT over a droppable therefore I can not use the droppable`s over function.

$(availableCommand).**draggable**({
    start: function(evt, ui){

var originalPosition = ui.helper.position();
$(this).data("ui-draggable").originalPosition = originalPosition;

    },
  stop: function(event) { 
    // Only Revert draggable to original position
    // if the draggable is NOT over an element of class .DropMe

 // PSEUDO CODE
 var isHoveringDroppable =  // Is draggable hover over an element of type .DropMe
 if(!isHoveringDroppable)
      {
        // revert draggable
        var draggable = $(this);
        draggable.animate(draggable.data("ui-draggable").originalPosition,"slow");
      }   
  }
});

I post the full codepen to my problem using the jquery top-droppable plugin as workaround for overlapping droppables: http://codepen.io/anon/pen/WbadbM

Pascal
  • 12,265
  • 25
  • 103
  • 195

2 Answers2

1

I found a very good solution now: $(element).draggable({ revert: function(dropped) { return !dropped; }, returns the draggable automatically when its not dropped over a droppable GREAT!

Pascal
  • 12,265
  • 25
  • 103
  • 195
0

use the over event:

$(".droppable").droppable({
     over: function (event, ui) { 
           var hoveringElement= $(this);
     } 
});
klanm
  • 3,168
  • 3
  • 19
  • 22
  • "I need to know this when I am NOT over a droppable therefore I can not use the droppable`s over function." You posted exactly this ;-) – Pascal Mar 12 '15 at 11:57
  • ok you are right try to use the accept and revert features of draggable and droppable. – klanm Mar 12 '15 at 12:04
  • Will this not break your topDroppable? I thought the accept did not work correctly... – Pascal Mar 12 '15 at 12:09
  • no apperantly not. here is the modified demo axample with accept and revert invalid. topDroppable breaks only if you use more than one of the topDroppable functions in your project: http://codepen.io/anon/pen/MYPrGd – klanm Mar 12 '15 at 12:10
  • I found a very good solution now: $(element).draggable({ revert: function(dropped) { return !dropped; }, returns the draggable automatically when its not dropped over a droppable GREAT! – Pascal Mar 12 '15 at 12:40