この画像を親から外に出ないようにする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/

あなたはあなたが必要とするしかし、それを作るために、画像や寸法で作業する必要があります。起動時に必要なものを整列させる初期化ステップを追加することもできます。