jQuery Droppable：触发“悬停”属性在监听什么？

Question

当设置一个 jQuery droppable 时，您可以根据悬停在它上面的可拖动对象来分配一个类（或函数），如下所示：

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

简单且默认使用可拖动的 jQuery 效果很好。

但是，我正在研究一种依赖于触摸的解决方案，因此，我选择不使用 jQuery 可拖动对象作为拖动部分。但是，我仍然想使用 Droppables。

问题：什么是可放置的“侦听”以确定项目是否被拖到它上面？有什么方法可以从我的家中触发一些鼠标事件，使其在被拖动时可以拖动，这会发出 droppable 的 hoverClass 的信号？

Answer 1

我相信over 和out 事件会触发此选项，尽管我还没有使用不带可拖动的droppable 来测试它。您可以使用accept 选项来选择您自制的可拖动对象，并且可放置对象应相应地对其进行处理。

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

如果不查看您的代码，虽然很难说出究竟会发生什么。查看droppable 的源代码，并结合阅读api，它应该阐明表面之下发生的事情以及它是否适用于您的情况。

        _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));
            }

    },