jQuery UI Droppable out 事件介绍

jQuery UI是一个jQuery插件集合，包含了各种交互、特效和UI组件等功能，其中包括Droppable组件。Droppable组件可以使页面上的某些元素具有拖拽接收功能。当可拖拽元素在Droppable区域内或离开区域时，会触发Droppable组件相应的事件，其中包括out事件。

out事件概述

out事件是Droppable组件的一个事件，是指当可拖拽元素离开Droppable区域时触发的事件。out事件的发生可以是因为拖拽元素被拖走了，也可以是因为其他原因（如Droppable区域被其他元素盖住了）。在out事件发生时可以做一些相关的处理，如重置Droppable区域的样式等。

语法格式

$( ".droppable" ).droppable({
    out: function( event, ui ) {
        // 处理out事件
    }
});

其中，droppable表示Droppable组件的选择器，out事件被绑定到这个选择器所选元素上，可以通过回调函数处理out事件，event表示事件对象，ui表示拖拽元素的相关信息。

示例代码

HTML代码：

<div class="draggable"></div>
<div class="droppable"></div>

JavaScript代码：

$(document).ready(function() {
    $(".draggable").draggable();
    $(".droppable").droppable({
        out: function(event, ui) {
            $(this).css("border", "none");
        },
        over: function(event, ui){
            $(this).css("border", "3px dotted #f00");
        }
    });
});

在上面的示例代码中，当可拖拽元素(.draggable)在Droppable区域(.droppable)内拖拽时，Droppable区域会出现红色虚线边框。当可拖拽元素移出Droppable区域时，Droppable区域的边框会恢复为无边框样式。

总结

通过以上介绍，我们了解了Droppable的out事件，可以根据实际需求在回调函数中做出相关处理。同时，在使用Droppable组件时，还可以绑定其他的事件，如over、drop等，来实现更灵活的交互效果。