jQuery UI Droppable Deactivate 事件

jQuery UI 是一个开源项目，提供了一些对 Web 开发非常有用的功能。其中之一是 Droppable 插件，该插件可以让元素成为可拖拽的目标。Droppable 插件还包含了一些事件，其中之一就是 deactivate 事件。在本文中，我们将介绍 Droppable 插件以及它的 deactivate 事件。

Droppable 插件

jQuery UI Droppable 插件是基于 jQuery UI Draggable 插件的扩展。Droppable 插件为 HTML 元素添加了一个目标标记，并且允许其他元素成为该目标的拖动源。当用户将拖动源拖放到 Droppable 目标上时，Droppable 将触发一些事件。有一些事件是与拖动源相关的，而 deactivate 事件则是与 Droppable 目标相关的。

Deactivate 事件

deactivate 事件在用户将拖动源拖出 Droppable 区域时触发。如果用户将拖动源拖到了一个非 Droppable 区域，或者将其放回到原来的位置，那么也会触发 deactivate 事件。在此事件被触发后，Droppable 将不再处于激活状态。

下面是一个使用 deactivate 事件的示例：

$( ".droppable" ).droppable({
    deactivate: function( event, ui ) {
        console.log( "Droppable was deactivated" );
    }
});

在这个示例中，我们在 Droppable 目标上设置了一个 deactivate 事件处理程序。当 Deactivate 事件被触发时，处理程序将打印一条消息 "Droppable was deactivated"。

总结

Droppable 插件是 jQuery UI 提供的非常有用的插件之一，它让我们可以将 HTML 元素设置为可拖拽的目标。Droppable 插件还包含了一些事件，其中之一就是 deactivate 事件。deactivate 事件在用户将拖动源拖出 Droppable 区域时触发，并且可以用于处理相关的行为。