如何在使用 jQuery（可拖动和可调整大小）拖动光标时调整图像大小

Posted 2023-05-08

【中文标题】如何在使用 jQuery（可拖动和可调整大小）拖动光标时调整图像大小

【英文标题】：How to resize an image while dragging a cursor using jQuery (Draggable & Resizable)

【发布时间】：2020-01-15 04:56:00

【问题描述】：

我想在本站https://alpine-groupemichel.com/alpine-a110重新创建图片的可拖动事件。

我设法拖动了光标，但我不知道如何在光标的 offset().left 之后调整图像的大小。

<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"  class="img-responsive">
            <div class="sliding-image">
              <img src="https://alpine-groupemichel.com/sites/default/files/8ee728e0ec67b7adf195fb8b26dd20373c6869cf.jpeg" >
            </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);
        
    );
);

【问题讨论】：

您也可以发布您的 html 吗？

现在看......

【参考方案1】：

我认为您可以使用可调整大小而不是可拖动的。像这样：

  $( function() 
    $( "#resizable" ).resizable(
      maxHeight: 250,
      maxWidth: 350,
      minHeight: 250,
      minWidth: 1,
      containment: "#container"
    );
   );

#resizable, #container background-image: url('http://lorempixel.com/400/400/')
#resizable  width: 200px; height: 250px;  filter: grayscale(100%);
#container  width: 400px; height: 250px; 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<div id="container">

<div id="resizable" class="ui-widget-content">

</div></div>

【讨论】：

是的，类似的，但我使用的光标不是您所看到的图像的默认光标。

你不能使用 CSS 自定义光标吗？像 cursor: url('path-to-image.png') 这个元素？

我想复制我上面提到的完全相同的网站，他们使用了一个不使用自定义 css 的简单图像。

【参考方案2】：

我找到了解决办法：

$(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);
        
      );
    ;
);

【讨论】：

很高兴您找到了解决方案。我对我的解决方案非常满意，以至于意识到它没有回答您的问题。我在这里学到了宝贵的一课。有时答案很简单。