Korzystam z interfejsu użytkownika JQuery do zaimplementowania elementów resizable / draggable. Teraz chciałbym zdefiniować ograniczenie dla tych elementów, które ogranicza zmianę rozmiaru / przeciąganie na dokładnie trzech (!) Stronach. Na przykład. Zerknij na toPrzykład JSFiddle. Widać, że zawarty element można zmienić rozmiar / przeciągnąć tylko wewnątrz obszaru rodzica.

Chciałbym osiągnąć to, że element może przekroczyć dolny próg i zostać przeniesiony poza dolną granicę rodzica. Niemniej jednak zmiana rozmiaru / przeciąganie powinna być nadal ograniczona u góry, po prawej i lewej stronie, zgodnie z zaleceniami odpowiednich granic rodzica.

Więcta modyfikacja oto co wymyśliłem:

// resizable/draggable option
resize/drag : function(event, ui) {
    expandParent("#parentElement", "#dragElement");
}

function expandParent(parentName, childName) {
    var dragEl = $(childName);
    var dragElTop = parseInt(dragEl.css("top"), 10);
    var dragElHeight = parseInt(dragEl.css("height"), 10);
    var dragElBottom = dragElTop + dragElHeight;
    var parentEl = $(parentName);
    var parentElBottom = parseInt(parentEl.css("height"));
    if(parentElBottom <= dragElBottom + 20) {
        parentEl.css("height", "+=2");
    }
}

Jeśli bawisz się dolną krawędzią, zauważysz, że obszar rodzica jest rozwinięty, jeśli dziecko zbliży się zbytnio do dolnej granicy rodzica. Niestety zatrzymuje się to po 20 pikselach. Następnie musisz zwolnić przycisk myszy i ponownie zmienić rozmiar / przeciągnąć, aby dalej rozszerzyć obszar. Czy masz jakiś pomysł, dlaczego tak jest?