możliwe ograniczenie rozmiaru jQuery do osi X lub Y, np. Ograniczenie przeciągnięcia?

Question

Ten jQuery pozwala ograniczyć ruch oporu więc występuje tylko na osi określonej:

$("#draggable2").draggable({ axis: 'x' }); 

Patrz: http://jqueryui.com/demos/draggable/#constrain-movement

To nie jest legalne jQuery, ale żeby to było:

$("#Container").resizable({ minHeight: 150, containment: {axis:'y' } }); 

Czy można uniemożliwić użytkownikowi zwiększenie szerokości #Container, jednocześnie pozwalając jej na podniesienie?

Dzięki

Answer 1

Tak, jest to możliwe przy użyciu zdarzeń interfejsu użytkownika. Wzdłuż osi x:

$("#Container").resizable({ 
    resize: function(event, ui) { 
     ui.size.width = ui.originalSize.width; 
    } 
}); 

lub wzdłuż osi y:

$("#Container").resizable({ 
    resize: function(event, ui) { 
     ui.size.height = ui.originalSize.height; 
    } 
}); 

Answer 2

Widzę dwa sposoby, aby to zrobić, jeden lepszy od drugiego. Najlepiej najpierw:

1) Ustaw minWidth i maxWidth na tę samą wartość (a mianowicie wartość, jaką ma pozostać szerokość).

$('#theThing').resizable({ minWidth = 200, maxWidth = 200 }); 

2) Utwórz element nadrzędny o stałej szerokości i ustaw go jako izolację. Nie wiem, jak to będzie działać na wysokości, ale domyślnie div bez określonej wysokości rośnie, jeśli ma zawartość, więc może działać.

Answer 3

Obie te odpowiedzi pracować, ale mają niefortunne konsekwencje pokazując < -> kursor na granicy wschodniej , sprawiając, że użytkownik myśli, że może zmienić szerokość. Co moim zdaniem jest lepszy mecz jest wywołanie to na obiekcie jQuery:

.resizable({handles:'s'})

ponieważ to będzie po prostu usunąć możliwość zmiany szerokości i kursor.

Answer 4

Zauważyłem, że po prostu wyczyszczenie w stylu linii wysokości lub szerokości obiektu po zmianie rozmiaru również działa. Dodatkową zaletą jest to, że nie wiąże się z oryginalnymi wymiarami obiektu (ponieważ mogą się one zmieniać w zależności od zawartości).

$("#Container").resizable({ 
    resize: function(event, ui) { 
     $(this).css('height',''); 
    } 
});