jQuery sortable resizable draggable的大小调整问题

Posted 2023-05-08

【中文标题】jQuery sortable resizable draggable的大小调整问题

【英文标题】：Resizing issue with jQuery sortable resizable draggable

【发布时间】：2011-07-12 20:24:20

【问题描述】：

我创建了一个可排序、可调整大小、可拖动、带有克隆的 portlet，但是当我调整它的大小时，我遇到了一个错误。

我的脚本：

<script type="text/javascript"> 

$(function() 
    $('#column1').draggable(
        helper:'clone',
        connectToSortable:'#sort',
        handle:'.widget-head',
    );

    $('#sort').sortable( 
        handle:'.widget-head',
        connectWith: "#sort",
        out: function (e,ui) 
            $("#sort").children().resizable( axis: 'x',containment: 'parent',
                resize:
                function(event, ui) 
                
                    ui.size.width = ui.originalSize.width;
                
            );
         
    );
);

</script>

【问题讨论】：

这里执行jsfiddle.net/sika/69fpn

【参考方案1】：

我发现问题与样式有关并且能够修复它。每次我调整大小时，位置都会变为绝对位置，因此我正在使用这个来处理：

$('#sort').sortable( 
    handle:'.widget-head',
    connectWith: "#sort",
    out: function (e,ui) 
        $("#sort").children().resizable(
            axis: 'x',
            containment: 'parent',
            resize: function(event, ui)  
                ui.size.width = ui.originalSize.width;
                (ui.helper).css('position': '', 'top': '0px');
            
        );
     
);