Javascript 要根据图像大小限制js可拖动吗

您好，我使用js Dragable在一个隐藏溢出的div中移动图像。但这项运动超出了显示白色背景的图像大小。我想限制可拖动的移动，直到图像宽度或高度结束

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script src="js/jquery.ui.touch-punch.js" ></script>

 <script>
  $( function() {
    $( "#sample_picture" ).draggable({ axis: "x" });
  } );
  </script>

  <div style='border:solid 1px #000; width:500px; height: 500px; overflow:hidden;'>
<img src='original/20-11-2020-1605856261-36864924254_f83451c4a4_o.jpg' id='sample_picture'  style='height:100%; width:auto;object-fit:cover;'>

  </div> 

$（函数（）{
$（“#示例_图片”）.draggable（{轴：“x”}）；
} );

您可以通过单击下面的链接复制该问题

---

帮我解决这个问题

这能回答你的问题吗？