JQueryUI 可拖动和可调整大小的框问题

Question

我使用JQueryUI，这是小提琴的例子。
我的问题是，正如您在我的小提琴中看到的那样，resizablediv中的文本行相互重叠，我的div只能拖动一次。
如何解决此问题？

爪哇语

    var DEF_HEIGHT = 100; // the #resizable default height
$( "#resizable" ).resizable({
    containment: 'parent',handles: "se",stop:resizeStop,
  aspectRatio: true,
  resize: function( event, ui ) {        
    var curHeight = (ui.size.height/ DEF_HEIGHT) * 100;
    $(this).css('font-size', curHeight + '%');
  }
}).draggable({containment: 'parent', stop:dragStop});
function dragStop(event, ui){
    convert_to_percentage($(this));
}
function resizeStop(event, ui){
    convert_to_percentage($(this));
}

.CSS

    #container {
   background:black;
    position:relative;
    margin:0;
    line-height:0;
    text-align:center;
}
#resizable { 
    width: 200px; 
    height: 100px; 
    padding: 10px; 
    font-size: 100%;
    position:absolute !important;
}

Answer 1

1） 您的行高为 0，这就是线条重叠的原因。

2）您使用代码中不存在的函数"convert_to_percentage"，这就是您只能拖动一次的原因

function dragStop(event, ui){
    convert_to_percentage($(this));
}
function resizeStop(event, ui){
    convert_to_percentage($(this));
}

看看这个： http://jsfiddle.net/YxcS8/