jquery - How to resize an image while dragging a cursor using jQuery (Draggable & Resizable)

Question

I want to recreate the draggable event of the image in this site https://alpine-groupemichel.com/alpine-a110 .

I managed to drag the cursor but i don't know how to resize the image following the offset().left of the cursor.

<section id="wide-description" class="third">
     <div class="container-fluid">
       <div class="row">
         <div class="-wide-image relative">
          <div class="slide-img relative">
            <img src="https://alpine-groupemichel.com/sites/default/files/c7de023e669081e77b86f9854f99672101ecfe5f.jpeg" alt="NOUVELLE ALPINE A110" class="img-responsive">
            <div class="sliding-image">
              <img src="https://alpine-groupemichel.com/sites/default/files/8ee728e0ec67b7adf195fb8b26dd20373c6869cf.jpeg" alt="NOUVELLE ALPINE A110">
            </div>
            <span id="drag-cursor">
              <span id="slider-cursor"></span>
            </span>
          </div>
          <div class="modelRevealInfos">
            <div class="row">
              <div class="col-md-6 col-sm-6 col-xs-6 no-padding">
                1103kg<br> 
                252 ch<br>                        4,5 s 0-100km/h<br>                      </div>
              <div class="col-md-6 col-sm-6 col-xs-6 no-padding">
                 4 180 mm<br>                        1 798 mm<br>                          1 252 mm<br>
              </div>
            </div>
          </div>
         </div>
       </div>
     </div>
</section>





$(document).ready(function(){
    var cursor = $('#drag-cursor');
    var img = $('.sliding-img');
    var xPos=0;
    cursor.draggable({
        axis: 'x',
        containment: $('.relative'),      
        drag: function(xPos) {
            var offset = $(this).offset();
            var xPos = offset.left;
            console.log(xPos);
        }
    });
});

标签： jquerydraggableresizable

Answer 1

我找到了解决方案：

$(document).ready(function(){
    $('.sliding-image img').css("width",$(window).width());
    $(window).resize(function() {
      $('.sliding-image img').css("width",$(window).width());
    });
    if( $('#drag-cursor').length ){
      $( "#drag-cursor" ).draggable({
        axis: "x",
        containment: $('-wide-img'),
        drag : function( event, ui ) {
          var offset = $(this).offset();
          var xPos = offset.left;
          $('.sliding-image').css("width",xPos);
        }
      });
    };
});