CODEWITHSUNDEEP
jqueryjquery-uijquery-draggable
Pascal
Pascal

Reputation: 12885

Get element of having certain class which I hover in the draggable stop event

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

Upvotes: 0

Views: 72

Answers (2)

Pascal
Pascal

Reputation: 12885

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!

Upvotes: 1

klanm
klanm

Reputation: 3278

use the over event:

$(".droppable").droppable({
     over: function (event, ui) { 
           var hoveringElement= $(this);
     } 
});

Upvotes: 0

Related Questions