jQuery UI Sortable 将拖动对象的类添加到占位符以确定大小

Posted 2023-03-05

【中文标题】jQuery UI Sortable 将拖动对象的类添加到占位符以确定大小

【英文标题】：jQuery UI Sortable add class of dragged object to placeholder to determine size

【发布时间】：2011-08-29 03:05:21

【问题描述】：

我正在使用 sortable 对不同的宽度 x 高度 div 进行排序，并使用砖石来清理空白空间。如何将正在排序的 div 的类传递给占位符，使它们的大小相同？

盒子有单单、双单等类来确定大小。

示例：http://jsfiddle.net/c3mdigital/fTBbc/17/

问题是课程没有通过。当 Sortable 无法识别占位符选项但将可见性设置为隐藏时，它会添加类。

代码：

//The extra ajax stuff is to save the sort order to WordPress menu order.
$(document).ready(function() 
$('#edit').click(function() 

    var itemList = $('.sortable');

    itemList.sortable(
        
        start: function(event, ui) 
            
            var plus = ui.item.hasClass('double-single') ? 'double-single' : 'single-single';
            var placeholder = 
            itemList.sortable("option", "placeholder", 'placeholder ' + plus );
            
        ,
                update: function(event, ui) 
                    $('#loading-animation').show(); // Show the animate loading gif while waiting
                    opts = 
                        url: MyAjax.ajaxurl,
                        // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php
                        type: 'POST',
                        async: true,
                        cache: false,
                        dataType: 'json',
                        data: 
                            action: 'item_sort',
                            // Tell WordPress how to handle this ajax request
                            order: itemList.sortable('toArray').toString() // Passes ID's of list items in  1,3,2 format
                        ,
                        success: function(response) 
                            $('#loading-animation').hide(); // Hide the loading animation
                            return;
                        ,
                        error: function(xhr, textStatus, e)  // This can be expanded to provide more information
                            alert(e);
                            // alert('There was an error saving the updates');
                            $('#loading-animation').hide(); // Hide the loading animation
                            return;
                        
                    ;
                    $.ajax(opts);
                
              );
      
  
        );
 
    $('.sortable').disableSelection();
);
    
$(function() 
    $('#sort').click(function() 
        $('#sortable1').masonry(
            columnWidth: 325,
            itemSelector: '.ui-state-default'
        );
    );
);

【参考方案1】：

您不能在 create 事件上执行此操作，该事件会在您初始化可排序时触发。相反，您可以设置placeholder:'placeholder'，并使用start 事件为ui.placeholder 添加一个额外的类以使其大小合适：

    itemList.sortable(
        placeholder: 'placeholder',
        start: function(event, ui) 
            var plus;
            if(ui.item.hasClass('single-single')) plus = 'single-single'; else
            if(ui.item.hasClass('single-double')) plus = 'single-double'; else
            if(ui.item.hasClass('single-triple')) plus = 'single-triple'; else
            if(ui.item.hasClass('double-single')) plus = 'double-single'; else
            if(ui.item.hasClass('double-double')) plus = 'double-double'; else
            if(ui.item.hasClass('double-triple')) plus = 'double-triple'; else
                 plus = 'single-single';
            ui.placeholder.addClass(plus);
        );

您可能想要实现更复杂的类检测方法，它只是快速复制粘贴，因此我可以对其进行测试。

这是演示：http://jsfiddle.net/fTBbc/24/