JS перетаскивание изображения

Question

Сделал изменение положения изображения по вертикали в блоке, при выравнивании сверху вниз, изображение останавливается при достижении края сверху, но при выравнивании изображения снизу вверх, после конца изображения идет пустая белая страница. Край низа указан серой полосой. Внизу скрин как это происходит.

Изображение должно останавливаться, а оно идет бесконечно вверх.

Вот HTMLкод:

<div class="cover">
        <div class="buttons">
            <div class="button cvr-btn" onClick="cover.cancel('120');">Cancel</div>
            <div class="button cvr-btn cvr-s-btn" onClick="cover.save('cover.jpg');">Save</div>
            <div class="button cvr-e-btn" onClick="cover.startedit('images/cover.jpg', '120');">Edit</div>
        </div>
        <div class="uploaded_info">
            <div class="text e-txt">Set cover position</div>
            <div id="les10_ex2" style="top:-120px;">
                <img src="images/cover.jpg" id="cover_img" class="img-responsive" />
            </div>
            <div id="cover_restart"></div>
        </div>
    </div>

Вот CSS код:

.profile> .center> .cover {
    width: 100%;
    height: auto;
    max-height: 380px;
    border-bottom: 1px solid rgba(0, 0, 0, .035);
}
.profile> .center> .cover> .buttons {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 5;
}
.profile> .center> .cover> .buttons> .button {
    background: #000000;
    float: right;
    padding: 7px 13px 7px 13px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    margin-left: 15px;
    opacity: 0.5;
}
.profile> .center> .cover> .buttons> .button:hover {
    opacity: 1;
}
.profile> .center> .cover> .buttons> .cvr-btn {
    display: none;
}
.profile> .center> .cover> .uploaded_info {
    width: 100%;
    height: auto;
    max-height: 380px;
    overflow: hidden;
    cursor: default;
    position: relative;
}
.profile> .center> .cover> .uploaded_info img {
    position: relative;
    z-index: 1;
}
.profile> .center> .cover> .uploaded_info> .text {
    display: none;
    position: absolute;
    z-index: 5;
    right: 20px;
    bottom: 20px;
    color:#fff;
    background:rgba(0, 0, 0, 0.600);
    -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.28);
    -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.28);
    padding:3px 7px 3px 7px;
    text-shadow:0px 1px 1px rgba(0, 0, 0, 0.506);
    border-radius:3px;
    font-size:12px;
    opacity:0.7;
}
.profile> .center #les10_ex2 {
    width: 100%;
    position: relative;
    top: 0px;
    z-index: 1;
}

Вот JS код перетаскивания:

$('#cover_img').attr('src', i);
    $("#les10_ex2").draggable({
        axis: 'y',
        stop: function(){
            $('.cvr-btn, .e-txt').show();
        },
        drag: function(event, ui){
            var d = ui.position.top;
            $('.cvr-btn, .e-txt').hide();
            if(d >= 0){
                $("#les10_ex2").remove();
                $('#cover_restart').html('<div id="les10_ex2" style="height:'+hi+'px; top: 0px; bottom: 0"><img src="'+i+'" id="cover_img" class="img-responsive" /></div>');
                $('.cvr-btn, .e-txt').show();
                cover.init(i, hi);
            }
            h = parseInt('-'+(hi));
            if(d <= h){
                $("#les10_ex2").remove();
                $('#cover_restart').html('<div id="les10_ex2" style="height:'+hi+'px; top:'+h+'px; bottom: 0"><img src="'+i+'" id="cover_img" class="img-responsive" /></div>');
                $('.cvr-btn, .e-txt').show();
                cover.init(i, hi);
            }
        }
    });

Видео пример: https://youtu.be/wXG7hDj9Ce0

Изображение по высоте должно быть автоматическим, так как дизайн делается адаптивным под все экраны. Поэтому я не указал высоту блока. Где я допустил ошибку, или не правильно сделал?

БЛОГ НА HUSL

JS перетаскивание изображения

Ответы (0 шт):