Question

54

jquery drag image

rated 0 times [ 61] [ 7] / answers: 1 / hits: 61376 / 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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

daren

Add To Favorites

Follow

Total Points: 577

Total Questions: 114

Total Answers: 120

Location: Malaysia

Member since Fri, Dec 3, 2021

2 Years ago

answered 15 Years ago joep · Accepted Answer

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>