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

Question

我使用 JQueryUI，这是 fiddle example .
我的问题是，正如您在我的 fiddle 中看到的那样，resizable div 中的文本行彼此重叠，而我的 div 只能拖动一次。
我该如何解决这个问题？

Javascript

    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/