[英]jQuery - Resizable Aspect Ratio Just For One Handle
我只想保護寬高比不受一個手柄影響。 我嘗試使用此代碼運行它,但並沒有幫助我。 你有什么解決方案?
$( "#resizable").resizable({
handles: 'se,e,w',
aspectRatio: true,
start: function(e,ui) {
if (jQuery(e.originalTarget).hasClass("ui-resizable-se")) {
aspectRatio: false;
}
}
});
特別感謝任何解決方案。
編輯:問題已解決。 您可以在此處查看解決方案: https : //stackoverflow.com/a/18101710/2572291
關於此錯誤有許多未解決的問題。
這是適合您的解決方案:)
<script>
var changedRatio = "DK"; //DK->dont keep
var nowResizing = "NO";
$(function() {
$('#resizable').resizable({
start:function(event,ui){
nowResizing = "YES";
},
stop:function(event,ui){
nowResizing = "NO";
}
});
$(document).on('mouseenter', '.ui-resizable-e', function(){
if(changedRatio!="DK"){
if(nowResizing!="YES"){
var targetDiv = $(this).parent().attr("id");
dontKeep(targetDiv);
}
}
});
$(document).on('mouseenter', '.ui-resizable-se', function(){
if(changedRatio!="K"){
if(nowResizing!="YES"){
var targetDiv = $(this).parent().attr("id");
keep(targetDiv);
}
}
});
$(document).on('mouseenter', '.ui-resizable-s', function(){
if(changedRatio!="DK"){
if(nowResizing!="YES"){
var targetDiv = $(this).parent().attr("id");
dontKeep(targetDiv);
}
}
});
});
function dontKeep(val){
$("#"+val).resizable("destroy");
$("#"+val).resizable({
aspectRatio:false,
start:function(event,ui){
nowResizing = "YES";
},
stop:function(event,ui){
nowResizing = "NO";
}
});
changedRatio = "DK";
}
function keep(val){
$("#"+val).resizable("destroy");
$("#"+val).resizable({
aspectRatio:true,
start:function(event,ui){
nowResizing = "YES";
},
stop:function(event,ui){
nowResizing = "NO";
}
});
changedRatio = "K";
}
</script>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
一個對我有用的簡單解決方案
var is_se = ($(this).data('uiResizable').axis == "se");
$(this).resizable( "option", "aspectRatio", is_se ).data('uiResizable')._aspectRatio = is_se;
略有變化對我有用,可能是因為jQuery的版本更高。 四個角的手柄將保持寬高比,而側面的手柄則不會。
$elements.resizable({
handles: "all",
start: function(event, ui) {
var handle = $(this).data('ui-resizable').axis;
// We should maintain the aspect ratio for corners, not for sides
var maintain_aspect_ratio = (["n", "e", "s", "w"].indexOf(handle) == -1);
$(this).resizable( "option", "aspectRatio", maintain_aspect_ratio )
.data('ui-resizable')
._aspectRatio = maintain_aspect_ratio;
},
...
我認為您應該提供長寬比,而不是true
。
aspectRatio: 16 / 9
要么
aspectRatio: 4 / 3
請參閱http://jqueryui.com/resizable/#aspect-ratio
要么
$( "#resizable:not(ui-resizable-se)").resizable({
handles: 'se,e,w',
aspectRatio: 16/9
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.