Я использую JQuery UI для реализации изменяемых размеров / перетаскиваемых элементов. Теперь я хотел бы определить содержание для этих элементов, которое ограничивает изменение размера / перетаскивание ровно с трех (!) Сторон. Например. Посмотри на этоПример JSFiddle, Вы можете видеть, что содержащийся элемент может быть изменен или перемещен только внутри родительской области.

Я хотел бы добиться, чтобы элемент мог превышать нижний порог и перемещаться за нижнюю границу родительского элемента. Тем не менее, изменение размера / перетаскивание все равно должно быть ограничено сверху, справа и слева, как это предусмотрено соответствующими границами родителя.

Такэта модификация это то, что я придумал:

// 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");
    }
}

Если вы поиграете с нижней границей, вы заметите, что область родителя расширяется, если ребенок подходит слишком близко к нижней границе родителя. К сожалению, это останавливается после 20 пикселей. Затем вам нужно отпустить кнопку мыши и снова изменить размер / перетащить, чтобы расширить область дальше. У вас есть идеи, почему это так?