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
和它的變化到文本區編輯文本,您可以拖動文本。
但是,您只能在雙擊它之前調整框的大小。如果雙擊該框並修改文本,則當您單擊時,該區域不再可調整大小。
有什麼建議嗎?