jQuery UI 可排序接收事件

jQuery UI是一种基于 Web 的技术，由各种 GUI 小部件、视觉效果和主题组成。这些功能可以使用 jQuery JavaScript 库来实现。 jQuery UI 是为网页构建 UI 界面的最佳工具。它还可以用于构建高度交互的 Web 应用程序，或者可以用于轻松添加小部件。

jQuery UI 可排序接收事件用于在已连接的可排序列表中的项目被放入另一个列表时触发。

句法：

• 我们需要使用接收回调函数初始化可排序小部件

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

• 将事件侦听器绑定到排序接收事件：

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

参数：这些是接受的以下参数。

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

CDN 链接：以下是您的项目需要的一些 jQuery Mobile 脚本，因此请将它们添加到您的项目中。

示例：此示例描述了 jQuery UI 可排序接收事件的使用。

HTML

  

    
    
    
    
    
    
  
    
        #sortable-1, #sortable-2 { 
            list-style-type: none; 
            width: 150px; 
            }
        #sortable-1 li, #sortable-2 li { 
            padding: 0.4em; 
            font-size: 17px; 
            height: 16px; 
            color: black;
            background-color: green;
        }
  
    
  
    
        $(function() {
            $( "#sortable-1" ).sortable({
                   receive : function (event, ui) {
                    $(".res").html ($(".res").html () 
                     + "<b>Receive</b><br>");
                   }
            });
            $( "#sortable-2" ).sortable({
                   connectWith : "#sortable-1, #sortable-2"
            });
        });
    
  

  

    
        
            GeeksforGeeks
        
  
        jQuery UI Sortable receive Event
  
        
        
             
                Name
                
                    GFG1
                    GFG2
                    GFG3
                
            
            
                Mark 
                
                    90
                    80
                    70
                
            
        
          
        
        
    

  

输出：

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