动态调整大小的div jquery答案

【问题标题】：dynamically resizable div jquery动态调整大小的div jquery
【发布时间】：2011-09-22 04:25:49
【问题描述】：

我的问题是当我创建 div 时使用

var toprint= "<div id='any' class ="resizable sort">content</div> <div id='any2' class ="resizable darg">content</div> ";

然后使用此代码添加到页面

$(ui.item).html(toprint);

只能排序，不能调整大小

$('.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'}); 
            } 
        }); 
    }  
});

【问题讨论】：

标签： jquery jquery-ui-resizable jquery-ui-sortable

【解决方案1】：

试试这个可能有用。

 $('.sort').live('click', function() {
    $(function() {
        $('.sort).children().resizable({
            axis: 'x', 
            containment: 'parent', 
            resize: function(event, ui)  { 
                ui.size.width = ui.originalSize.width; 
                (ui.helper).css({'position': '', 'top': '0px'}); 
            });
        });
    });
});

【讨论】：

【解决方案2】：

它的工作现在只需要实时功能:)

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Resizable - Maximum / minimum size</title>
    <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery-ui-1.8.13.custom.min.js"></script>

    <style>
    #resizable { width: 440px; height: 150px; padding: 5px; border-right:5px #3C0 solid; }

    </style>

    <style type="text/css">
.tableres
{ 
border-collapse:collapse;
}
.tableres, td, th
{
border:1px solid black;
}
.ul1 {


}
</style>

    <script>


    $('.ul1').live('click', function() {
  // Bound handler called.



    $(function() {
        $( ".ui-widget-content" ).resizable({

            maxWidth: 780,
            minWidth: 100
        });
    });

    });

    </script>
</head>
<body>

<div class="demo">

<table class="tableres" width="880px" cellspacing="0" cellpadding="0">
  <tr>
    <td width="10%" align="center" valign="top"><div id="resizable" class="ui-widget-content ul1"></div></td>
    <td width="90%" align="center" valign="top"><div class="ul1" >make me resize</div></td>

  </tr>
</table>


</div><!-- End demo -->




</body>
</html>

【讨论】：