Javascript JQueryUI可拖动和可调整大小的盒子问题

我使用JQueryUI，这是。
我的问题是，正如您在我的小提琴中看到的那样，

resizeable

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;
}

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

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

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

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

---

看看这个：

问题在于将百分比转换为百分比，如果删除它，它会工作，这个函数定义了吗？它没有在fiddle中定义，也许这就是问题所在