jQuery UI 可排序开始事件

jQuery UI 由使用 jQuery JavaScript 库实现的 GUI 小部件、视觉效果和主题组成。 jQuery UI 非常适合为网页构建 UI 界面。它可用于构建高度交互的 Web 应用程序，也可用于轻松添加小部件。

jQuery UI Sortable start事件用于在开始排序列表项时触发。

句法：

使用启动回调函数初始化可排序小部件。

$(".selector").selectable({
    start: function( event, ui ) {}
});

将事件侦听器绑定到排序开始事件。

$( ".selector" ).on( "sortstart", function( event, ui ) {} );

参数：

• event：排序开始时触发该事件。
• ui：这是具有以下给定选项的对象类型。
  • helper：表示已排序助手的 jQuery 对象。
  • item： jQuery 对象代表当前拖动的项目。
  • offset：辅助对象的当前绝对位置，表示为 { top, left }。
  • position：辅助对象的当前位置，表示为 { top, left }。
  • originalPosition：辅助对象的原始位置，表示为 { top, left }。
  • 发件人：从一个可排序对象移动到另一个可排序对象的 jQuery 对象类型的可排序项。
  • placeholder：用作占位符的元素。这是 jQuery 对象类型。

CDN 链接：首先，添加项目所需的 jQuery UI 脚本。

示例：以下示例演示了 jQuery UI 小部件的可排序开始事件。

HTML

  

    
    
    
    
    
    
  
    
        #sortable {
            list-style-type: none;
            width: 50%;
        }
  
        #sortable li {
            margin: 10px 0;
            padding: 0.5em;
            font-size: 25px;
            height: 20px;
        }
    
  
    
        $(function () {
            $("#sortable").sortable({
                start: function (event, ui) {
                    $(".res").html("Sortable Event Started.");
                },
                stop: function (event, ui) {
                    $(".res").html("Sortable Event Stopped.");
                }
            });
        });
    

  

    
        
            GeeksforGeeks
        
  
        jQuery UI Sortable start Event
  
        
            BCD
            CAB
            BAC
            BCA
            ABC
        
  
        
    

  

输出：

参考： https://api.jqueryui.com/sortable/#event-start