Question

我的问题是当我创建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'}); 
            } 
        }); 
    }  
});

Answer 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'}); 
            });
        });
    });
});

Answer 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>

动态可调整大小的div jquery

2 个答案: