1

我需要在 div 标签中向下拖动图像并将其恢复到正常位置，而图像不会超出 div 标签的顶部。我已使用此属性“溢出-y：隐藏”仅在 y 轴上拖动。

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

这个用例可以想象成一个车窗关闭和打开的地方（关闭边距是固定的，打开只完成了 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;
}
4

2 回答 2

1

你能提供你工作的 JSFiddle 吗？没有它我只能给你jQuery的例子：可拖动效果。

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

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

于 2013-01-30T18:20:45.327 回答
0

我得到了我的问题的解决方案:-) 我所要做的就是以下列方式编辑我的 js 代码

javascript代码

 $(function() {
$( "#draggable" ).draggable({ axis: "y", containment: [ 0, 67, 0, 320] });


});
于 2013-01-31T09:16:50.343 回答