Thursday, April 25, 2024
 Popular · Latest · Hot · Upcoming
54
rated 0 times [  61] [ 7]  / answers: 1 / hits: 61458  / 15 Years ago, fri, june 19, 2009, 12:00:00

i want to make a draggable image in jquery.
first of all my experience with jquery is 0. having said that let me describe what i want to achieve. i have fixed width/height div. and the image contained inside the div is large in size. so i want the image to be draggable inside that div so that the user can see the entire image.



can someone help. pls be a little elaborate about the procedure considering my jquery fluency.


More From » jquery

 Answers
168

You can use the following;





$(function() {
$(#draggable).draggable();
});

.container {
margin-top: 50px;
cursor: move;
}

#screen {
overflow: hidden;
width: 200px;
height: 200px;
clear: both;
border: 1px solid black;
}

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js></script>

<div class=container>
<div id=screen>
<img src=https://picsum.photos/200/200 class=drag-image id=draggable />
</div>
</div>




[#99278] Tuesday, June 16, 2009, 15 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
daren

Total Points: 577
Total Questions: 114
Total Answers: 120

Location: Malaysia
Member since Fri, Dec 3, 2021
2 Years ago
;