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

Question

I use JQueryUI , and this is fiddle example .
My problem is , as you can see in my fiddle , the text line in resizable div are overlap each other and my div can drag just one Time .
How can I fix this issue ?

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) your line-height is 0 this is the reason the lines overlap.

2) you use a function "convert_to_percentage" which is not present in your code, this is the reason you can only drag it once

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

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

Have a look at this: http://jsfiddle.net/YxcS8/