如何讓這個圖像不離開父母div

Question

我得到了這段代碼我無法弄清楚如何不超過父母div邊界。

對象的可拖動和我用滑塊調整它，但我不能如何做到這一點，謝謝。

$(document).on("input change",'.image-slider', function() { 

    $('#timelineBGload-perfil').draggable(); 

    var slider = parseInt($(this).val()); 

    var height1 = $('#timelineBGload-perfil').height(); 
    var width1 = $('#timelineBGload-perfil').width(); 

    var percent1 = width1/600 * 100; 

     var jeje = slider - 191; 
     var jeje2 = slider - 191; 

     $('#timelineBGload-perfil').css({'width': slider,'height':'auto'}); 

     $('#timelineBGload-perfil').css({'left': '-'+ jeje +'px','top': '-'+ jeje2 +'px'}); 

    }); 

https://jsfiddle.net/fypqgym1/

Answer 1

您必須在移動它之前，考慮到圖像的位置。我加入這個關鍵部分，你的邏輯：

var previousLeft = $('#timelineBGload-perfil').css('left'); 
var previousTop = $('#timelineBGload-perfil').css('top'); 

下面是一些優化工作的例子： https://jsfiddle.net/fypqgym1/11/

您需要用圖像和尺寸的工作，使其無論你需要的。您也可以添加一個初始化步驟，讓您按照啓動時所需的方式進行對齊。