jQuery UI Sortable over事件

jQuery UI 的 Sortable 组件提供了一个 over 事件，该事件在可排序元素被拖动到另一个可排序元素上方时触发。在本教程中，我们将详细介绍 Sortable 的 over 事件的使用方法。

事件基本语法如下：

$( ".selector" ).sortable({
  over: function( event, ui ) {}
});

其中，".selector" 是 Sortable 的 CSS 选择器。

以下两个示例：

示例一：使用 Sortable 的 over 事件

$( "#my-sortable" ).sortable({
  over: function( event, ui ) {
    console.log( "Sortable element is over another sortable element" );
  }
});

这将创建一个名为 my-sortable 的 Sortable 实例，并在拖动元素到另一个可排序元素上方时触发 over 事件。在事件处理程序中，将消息“Sortable element is over another sortable element”记录到控制台。

示例二：使用 Sortable 的 over 事件和 CSS 类

$( "#my-sortable" ).sortable({
  over: function( event, ui ) {
    $( ui.placeholder ).addClass( "highlight" );
  },
  out: function( event, ui ) {
    $( ui.placeholder ).removeClass( "highlight" );
  }
});

这将创建一个名为 my-sortable 的 Sortable 实例，并在拖动元素到另一个可排序元素上方时触发 over 事件。在事件处理程序中，使用 addClass() 方法将 CSS 类“highlight”添加到占位符元素。然后，在 out 事件处理程序中，使用 removeClass() 方法将该类从占位符元素中删除。

总结：

jQuery UI 的 Sortable 组件提供了一个 over 事件，该事件在可排序元素被拖动到另一个可排序元素上方时触发。要使用 over 事件，需要将其与 Sortable 的 jQuery 对象一起使用。可以在 over 事件处理程序中执行任何操作，例如添加或删除 CSS 类。