CODEWITHSUNDEEP
jquerycsshtmlanimationdraggable
swati
swati

Reputation: 129

how to make a image in div to be dragged just downwards using html5 css jquery animation?

i have requirement of dragging a image downwards in a div tag and get it back to normal position without the image going out of the top of the div tag. I have used this Attribute "overflow-y: hidden" to drag only in y axis.

However i have not met my requirements which are as follows 1. Image should not be draggable outside the top of the div tag. It should be fixed there. 2. Image should be draggable down only to a certain extent and not fully.

This use case could can be imagined as a car window closing and opening where (Closing margin is fixed & opening is done just 90% not fully)

Kindly help with this issue asap. I would be very great ful !! Thanks

Below is the code :

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>

Style.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;
}

Upvotes: 1

Views: 513

Answers (2)

swati
swati

Reputation: 129

i got the solution for my question :-) All i had to do was edit my js code in the following manner

javascript code 

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


});

Upvotes: 0

KGKG
KGKG

Reputation: 88

Can you please provide a JSFiddle of your work? Without it I can only give you the jQuery example: draggable effect.

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

I have also seen the use of padding for pushing down an element in CSS without having it removed from the div tags. Please provide JSFiddle, so I understand more of what you are trying to get at.

Upvotes: 1

Related Questions