Невозможно изменить размер Вертикальной линейки снова после остановки размера

Question

Я использую виджет JQuery Resizable на вертикальном линейке, как показано на приведенной ниже ссылке. Однажды, я начинаю изменять размер с помощью восточной ручки и останавливаю ее. Теперь я снова пытаюсь изменить размер линейки, и я обнаружил, что ручка изменения размера не появляется. Я проверил html div, но div с ui-resizable удаляется. Любая помощь была бы полезна.

Моего JS код:

createRuler(); 

$('.ruler').resizable({ 
    handles: "e", 
    resize: function(event, ui) { 
    $('.ruler').empty(); 
    createRuler(); 
    }, 
    stop: function(event, ui) {}, 
    start: function(event, ui) {} 
}); 

Check here for complete code

Answer 1

Эта линия разбивает:

$('.ruler').empty(); 

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

Попробуйте установить некоторую логику, которая запускает $('.ruler').empty(); ТОЛЬКО при первом щелчке рукоятки линейки.

Answer 2

Мой Html код:

<div class="container"> 
<div class='ruler'></div> 
</div> 

Я изменил логику в моем JS кода. Вместо изменения размера внутреннего-div (линейки) я применил изменение размера на внешнем-div (контейнере), которое отлично работало.

Обновленный JS код:

createRuler();

$('.container').resizable({ 
    handles: "e", 
    alsoResize: ".ruler", 
    resize: function(event, ui) { 
    $('.ruler').empty(); 
    createRuler(); 
    }, 
    stop: function(event, ui) {}, 
    start: function(event, ui) {} 
});