jquery - 如何使用 html5 css jquery 动画使 div 中的图像向下拖动？

Question

我需要在 div 标签中向下拖动图像并将其恢复到正常位置，而图像不会超出 div 标签的顶部。 我已经使用这个属性“overflow-y: hidden”来仅在 y 轴上拖动。

但是我还没有满足我的要求如下 1. 图片不能拖到 div 标签顶部之外。它应该固定在那里。 2. 图像只能在一定程度上向下拖动，而不是完全向下拖动。

这个用例可以想象成车窗的关闭和打开，其中(关闭 margin 是固定的，打开只有 90% 没有完全完成)

请尽快帮助解决此问题。我会非常高兴! 谢谢

代码如下:

JavaScript.js

 $(function() {
$( "#draggable" ).draggable({ axis: "y" });

});



<div id="container">
        <img  id="draggable" src="img/car.jpg" width="400px" height="300px" alt="Click this image to drag it down" >
    </div>                             

样式.css -----

#draggable
{
    margin-bottom:20px;
    cursor:pointer;
}                                                                 

 #container
{ 
    position: absolute;
    left: 10%;
    top: 10%;
    overflow-y: hidden; 
    containment: 'parent'
    height: 320px; 
    width: 400px; 
    border: solid 1px black;
}

Answer 1

能否请您提供您工作的 JSFiddle？没有它，我只能给你 jQuery 示例:可拖动效果。

 $(document).ready(function(){
    $('#car').draggable(); );

我还看到了在 CSS 中使用填充来下推元素，而无需将其从 div 标记中删除。请提供 JSFiddle，以便我更了解您要达到的目的。