博客

jQuery UI sortable receive事件

  • Post category:jquery

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

事件基本语如下：

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

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

以下两个示例：

示例一：使用 Sortable 的 receive 事件

$( "#my-sortable" ).sortable({
  receive: function( event, ui ) {
    console.log( "Sortable element received a new item" );
  }
});

这将创建一个名为 my-sortable 的 Sortable 实例，并将元素拖动到该实例中时触发 receive 事件。在事件处理程序中，将消息“Sortable element received a new item”记录到控制台。

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

$( "#my-sortable" ).sortable({
  receive function( event, ui ) {
    $( ui.item ).addClass( "new-item" );
  }
});

这将创建一个名为 my-sortable 的 Sortable 实例，并在将元素拖动到该实例中时触发 receive 事件。在事件处理程序中，使用 addClass() 方法将 CSS 类“new-item”添加到新添加的元素。

总结：

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

Tags: