2014-01-29 31 views
0

我有一個頁面,允許您修改它的一些文本,如wysiwyg。jQuery UI可調整大小停止工作

可編輯div看起來像這樣

<div id="area_3" class="dragThis" style="position: absolute; left: 43px; top: 5px; width: 237px; height: 157px; color: rgb(0, 0, 0);" data-color-default="#000" data-font-default="Verdana" data-content-type="text"> 
    <h1>Business Name</h1>123 Right Here Way 
    <br>Tampa, FL 33607 
    <br>[email protected] 
    <br>(813) 888-8888 
</div> 

而且JS說上div負荷是這樣的:

$('#startDragging div[class="dragThis"]').each(function(i) { 
     if($(this).attr('data-content-type') == 'text'){ 
      $(this).resizable(); 
     } 
     $(this).draggable({ containment: "parent" }) 
     .bind('dblclick', function() { 
      $('#area').val($(this).attr('id')); 
      if($(this).attr('data-content-type') == 'text'){ 
       editIT($(this)); 
      } else if($(this).attr('data-content-type') == 'image'){ 
       changeImage($(this)); 
      } else if($(this).attr('data-content-type') == 'video-image'){ 
       changeVideoImage($(this)); 
      } 
     }).bind('click', function() { 
      var styles = $(this).attr('style').split(';'); 
      $.each(styles, function(i) { 
       var style = this.split(':'); 
       var style0 = $.trim(style[0]); 
       var style1 = $.trim(style[1]); 
       if(style0 == 'font-size'){ 
        $('#controls #font-size option[value="'+style1+'"]').attr('selected', true); 
       } else if(style0 == 'color'){ 
        $('#controls #color option[value="'+style1+'"]').attr('selected', true); 
       } else if(style0 == 'text-align'){ 
        $('#controls #text-align option[value="'+style1+'"]').attr('selected', true); 
       } 
      }); 
     }); 
    }); 
}); 
function editIT(what){ 
    what.html('<textarea id="text_'+what.attr('id')+'" style="width:'+what.css('width')+';height:'+what.css('height')+';">'+what.html()+'</textarea>'); 
    $('#text_'+what.attr('id')).focus(); 
    what.unbind('dblclick'); 
    $('#text_'+what.attr('id')).blur(function() { 
     var newText = $(this).val().replace(/\r\n|\r|\n/g,"<br />"); 
     what.html(newText); 
     what.resizable(); 
     what.bind('dblclick', function() { 
      $('#area').val($(this).attr('id')); 
      editIT($(this)); 
     }).bind('click', function() { 
      var styles = $(this).attr('style').split(';'); 
      $.each(styles, function(i) { 
       var style = this.split(':'); 
       var style0 = $.trim(style[0]); 
       var style1 = $.trim(style[1]); 
       if(style0 == 'font-size'){ 
        $('#controls #font-size option[value="'+style1+'"]').attr('selected', true); 
       } else if(style0 == 'color'){ 
        $('#controls #color option[value="'+style1+'"]').attr('selected', true); 
       } else if(style0 == 'text-align'){ 
        $('#controls #text-align option[value="'+style1+'"]').attr('selected', true); 
       } 
      }); 
     }); 
    }); 
} 

一切是偉大的工作,你可以雙擊該div和它的變化到文本區編輯文本,您可以拖動文本。

但是,您只能在雙擊它之前調整框的大小。如果雙擊該框並修改文本,則當您單擊時,該區域不再可調整大小。

有什麼建議嗎?

回答

1

而不是改變實際可調整大小的HTML,爲什麼不把其他容器內部將被轉換爲文本區域?

你會碰到這樣的:

<div id="area_3" class="dragThis" style="position: absolute; left: 43px; top: 5px; width: 237px; height: 157px; color: rgb(0, 0, 0);" data-color-default="#000" data-font-default="Verdana" data-content-type="text"> 
    <div id="edit"> 
     <h1>Business Name</h1>123 Right Here Way 
     <br>Tampa, FL 33607 
     <br>[email protected] 
     <br>(813) 888-8888</div> 
</div> 

而且強似$(this)editIt功能,你會通過$(this).find("#edit")

下面是一個演示如何工作的小提琴。點擊事件的重新綁定將不再是必要的,但您希望跟蹤您目前是否處於編輯模式。示例:http://jsfiddle.net/WxwLa/

相關問題