Question

I have a draggable object, with that can be accepted in several droppables.. I have put all the droppables in a container, and simply want to be able to detect when the draggable is hovering over the container of droppables…

At first, I tried making use of the ‘over’ and ‘out’ callbacks for droppables, but it was not working because hovering from one droppable to another (inside the same container) was causing it to think the mouse had left the container…

So my next approach was to in the drag start callback, do an event listener for mouseenter and mouseleave on the container– and then stop listening on the drag stop callback…

However, this results in total crazy behavior… If you look at my example page:

http://collinatorstudios.com/www/jquery_draggable_test.html

When dragging the box to the red dropzone, you should see “enter” when the mouseenter event fires, and “leave” when mouseleave happens.. However, just dragging the box over the inside of the container causes “leave” to appear a zillion times….. I cannot figure out why this is happening, nor what solution there is to my problem so I can do what I need to. I’ve been working on this for almost 4 hours now and am losing my mind over what seems like it should be so simple to achieve.

Any help would be greatly appreciated… Thanks.

Answer 1

You only need to bind to the events once! There is no need to bind and unbind them each time… I separated them out in the code below to make it more clear about binding once.

And as ZDYN said (+1 to him), you need to include a droppable code, but instead of using the container, use the zones inside… here is a demo and the full code below.

var feedback = $('#feedback');

$('.item').draggable({
    revert: true,
    zIndex: 999,
    cursor: 'move'
});

$('.drop_zone').droppable({
    drop: function(event, ui) {
        ui.draggable.appendTo($(this));
    }
}).bind('dropover dropout', function(e) {
    var id = this.id;
    feedback.text(e.type === 'dropover' ? 'Over: ' + id : 'Out: ' + id);
});