Question

我使用JQueryUI，这是fiddle example 我的问题是，正如你在我的小提琴中看到的那样，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/

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

1 个答案: