jQuery Droppable: what is it listening for to trigger 'hover' property?

Question

When setting up a jQuery droppable, you can assign a class (or function) based on a draggable hovering over it like this:

$(".myDroppable")
    .droppable({
        hoverClass : 'droppableStyle'
    })

Simple and works great with a jQuery draggable by default.

However, I'm working on a solution that relies on touch, and, as such, I've opted to not use jQuery draggables for the dragging part. I'd still like to use the Droppables, however.

The question: what is the droppable 'listening' for to determine if an item is being dragged over it? Is there any way I could trigger some mouse events from my home made draggable as it's being dragged that would signal the droppable's hoverClass?

Answer 1

I believe the over and out events trigger this option, though I have yet to use a droppable without a draggable to test this. You can use the accept option to select your home-made draggable and the droppable should treat it accordingly.

$(".myDroppable")
    .droppable({
        hoverClass: "droppableStyle",
        accept: ".homeMadeDraggable"
});

Without looking at your code though its hard to tell what exactly will happen. Have a look at the source code for droppable, in conjunction with reading the api, it should clarify what is going on beneath the surface and whether or not it will work in your case.

        _over: function(event) {

            var draggable = $.ui.ddmanager.current;
            if (!draggable || (draggable.currentItem || draggable.element)[0] == this.element[0]) return; // Bail if draggable and droppable are same element

            if (this.options.accept.call(this.element[0],(draggable.currentItem || draggable.element))) {
                    if(this.options.hoverClass) this.element.addClass(this.options.hoverClass);
                    this._trigger('over', event, this.ui(draggable));
            }

    },

    _out: function(event) {

            var draggable = $.ui.ddmanager.current;
            if (!draggable || (draggable.currentItem || draggable.element)[0] == this.element[0]) return; // Bail if draggable and droppable are same element

            if (this.options.accept.call(this.element[0],(draggable.currentItem || draggable.element))) {
                    if(this.options.hoverClass) this.element.removeClass(this.options.hoverClass);
                    this._trigger('out', event, this.ui(draggable));
            }

    },