Как исправить это движущееся поле под изменяемым размером при перетаскивании

Question

Я делаю изменяемый размер окна на мобильном телефоне. проблема в том, что этот текст под этим полем продолжает двигаться при перетаскивании верхнего края поля. я не знаю где починить?

помоги мне! Пожалуйста.

$('#resize').resizable({
    helper: "ui-resizable-helper",
    handles:'n'
});

проверьте эту проблему на jsfiddle.

https://jsfiddle.net/blossom/yt6o34d5/22/

Answer 1

При изменении размера с севера ("n") настраиваются стили height и top.Если вы хотите уменьшить сверху, вы должны отказаться от стиля top.Это можно сделать с помощью .css(), установив для него значение 0 или удалив его (значение "").

Пример: https://jsfiddle.net/Twisty/2ov0fbr7/

JavaScript

$(function() {
  $('#resize').resizable({
    helper: "ui-resizable-helper",
    grid: [10, 10],
    handles: 'n',
    stop: function(e, ui) {
      ui.element.css("top", "");
    }
  });
});

Надеюсь, это поможет.